@charset "utf-8";
/* 較大尺寸的螢幕 - 1024px 以上 */
@media screen and (min-width: 1024px) {
.pagesGrid { display: grid; grid-template-columns: 28rem auto; position: relative; width: var(--mainBoxWidth); margin: 0 auto; z-index: 1; }
.pagesGrid .gridBox_1 { grid-column: 1; grid-row: 1; }
.pagesGrid .gridBox_2 { grid-column: 2; grid-row: 1; align-self:flex-end; }
.pagesGrid .gridBox_3 { grid-column: 1/3; grid-row: 2; margin: 1rem 0 2rem; }
.pagesGrid .gridBox_4 { grid-column: 1; grid-row: 3; }
.pagesGrid .gridBox_5 { grid-column: 2; grid-row: 3; }
.pagesGrid .gridBox_6 { grid-column: 1/3; grid-row: 4; }
.pagesGrid .gridBox_7 { position: absolute; width: var(--pageBgWidth); height: var(--pageBgHeight); z-index: -1; right: 0; transform: translateX(12%); }

.mainNav { height: 5rem; }
.mainNav > a { width: 12rem; }
.logoLink { padding: 3rem 0 1.5rem; }

}

/* 桌上型電腦 */
@media screen and (min-width: 1367px) {
:root {
	--mainBoxWidth : 128rem;
	--pageBgWidth : calc( 58.6rem * 1.4 );
	--pageBgHeight : calc( 26.4rem * 1.4 );
}
.pagesGrid { column-gap: 10rem; }

.sideHeader { font-size: 2.4rem; line-height: 3rem; padding-left: 1.5rem; margin-bottom: 5rem; }
.sideNav { display: flex; flex-direction: column; align-items: stretch; padding-left: 6.5rem; }
.sideNav > a { padding: 1rem 0 1rem 1rem; border-bottom: .1rem solid #666; }

.contentHeader { margin-bottom: 5rem; font-size: 2rem; line-height: 2rem; padding-left: .5rem; letter-spacing: 0; font-weight: lighter; }
.contentHeader > span { color: #999; }
.contentBox { display: flow-root; margin-bottom: 3rem;}

.slogans { font-size: 2rem; }
}

/* 筆記型電腦 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
:root {
	--mainBoxWidth : 95rem;
	--pageBgWidth : 58.6rem;
	--pageBgHeight : 26.4rem;
}
.pagesGrid { column-gap: 6rem; }

.sideHeader { font-size: 2rem; line-height: 2.4rem; padding-left: 1rem; margin-bottom: 3rem; }
.sideNav { display: flex; flex-direction: column; align-items: stretch; padding-left: 6.5rem; }
.sideNav > a { padding: 1rem 0 1rem 1rem; border-bottom: .1rem solid #666; }

.contentHeader { margin-bottom: 3rem; font-size: 1.8rem; line-height: 1.8rem; padding-left: .5rem; letter-spacing: 0; font-weight: lighter; }
.contentHeader > span { color: #999; }
.contentBox { display: flow-root; margin-bottom: 3rem;}

.slogans { font-size: 1.8rem; }
}


/* 較小螢幕的尺寸 - 1023px 以內 */
@media screen and (max-width: 1023px) {
:root{
	--pageBgWidth : 58.6rem;
	--pageBgHeight : 26.4rem;
}
html,body { overflow-x: hidden; background-color: #f6f1e8; }

.logoLink { padding: 2rem 0 .5rem; }
.mobileHidden { display: none;}
}

/* 平版 */
@media screen and (min-width: 481px) and (max-width: 1023px) {
.pagesGrid { display: grid; padding: 0 2rem 2rem; grid-template-columns: minmax( 16rem , 20vw) auto; column-gap: 5rem; position: relative; z-index: 1; }
.pagesGrid .gridBox_1 { grid-column: 1/3; grid-row: 1; }
.pagesGrid .gridBox_2 { grid-column: 1/3; grid-row: 2; margin: 1rem 0 2rem;}
.pagesGrid .gridBox_3 { grid-column: 2; grid-row: 1; align-self: flex-end; text-align: right; }
.pagesGrid .gridBox_4 { grid-column: 1; grid-row: 3;}
.pagesGrid .gridBox_5 { grid-column: 2; grid-row: 3; }
.pagesGrid .gridBox_6 { grid-column: 1/3; grid-row: 4; }
.pagesGrid .gridBox_7 { position: absolute; width: var(--pageBgWidth); height: var(--pageBgHeight); z-index: -1; right: 0; transform: translateX(12%); }

.mainNav { height: 5rem; }
.mainNav > a { width: 12rem; }

.sideHeader { font-size: 2rem; line-height: 2.4rem; padding-left: 1rem; margin-bottom: 3rem; }
.sideNav { display: flex; flex-direction: column; align-items: stretch; }
.sideNav > a { padding: 1rem 0 1rem 1rem; border-bottom: .1rem solid #666; }

.contentHeader { margin-bottom: 3rem; font-size: 1.8rem; line-height: 1.8rem; padding-left: .5rem; letter-spacing: 0; font-weight: lighter; }
.contentHeader > span { color: #999; }
.contentBox { display: flow-root; margin-bottom: 3rem;}

.slogans { font-size: 1.8rem; }
}

/* 手機 */
@media screen and (max-width: 480px) {
.pagesGrid { display: grid; padding: 0 2rem 2rem; gap: 1rem; position: relative; z-index: 1; }
.pagesGrid .gridBox_1 { grid-column: 1; grid-row: 1; text-align: center; background-color: #f5efe3dd; }
.pagesGrid .gridBox_2 { grid-column: 1; grid-row: 2; }
.pagesGrid .gridBox_3 { grid-column: 1; grid-row: 3; }
.pagesGrid .gridBox_4 { grid-column: 1; grid-row: 4; display: none; }
.pagesGrid .gridBox_5 { grid-column: 1; grid-row: 5; }
.pagesGrid .gridBox_6 { grid-column: 1; grid-row: 6; }
.pagesGrid .gridBox_7 { position: absolute; width: var(--pageBgWidth); height: var(--pageBgHeight); z-index: -1; top: 0; right: 0; transform: translateX(30%); }

.mainNav { box-shadow: 0 0 1rem #00000099; position: sticky; top: 0; }

.sideHeader { font-size: 2rem; line-height: 2.4rem; padding-left: 1rem; }
.sideNav { display: flex; flex-direction: column; align-items: stretch; }
.sideNav > a { padding: 1rem 0 1rem 1rem; border-bottom: .1rem solid #666; }

.contentHeader { margin-bottom: 3rem; font-size: 1.8rem; line-height: 1.8rem; padding-left: .5rem; letter-spacing: 0; font-weight: lighter; }
.contentHeader > span { color: #999; }
.contentBox { display: flow-root; }

.slogans { font-size: 1.8rem; }
.mobileHiddenImg { display: none; }
}



/* ==== 多頁面共用設定 Start ==== */
.mainNav { color: #fff; display: flex; justify-content: center; padding: 1rem 0;  }
.mainNav > a { font-size: 1.8rem; line-height: 3rem; color: #fff; letter-spacing: .2rem; padding: 0 1.5rem; text-align: center; transition: .1s; }
.mainNav > a:not(:last-child) { border-right: .1rem solid #fff; }
.mainNav > a:hover { color: #e3e7e8; font-size: 2rem; }
.mainNav > a > span { display: inline-block; }

.sideNav .selected { background-color: #a38830; color: #fff;}

.banner_bg { background: url(../images/pages_banner_02.jpg) no-repeat center / cover;}

.copyright { color:#666; border-top: .1rem solid #a6a48d; padding: 2rem 0; margin-top: 3rem; }
.copyright > span { color: #999; font-size: 1.4rem; }

/* ==== 多頁面共用設定 End ==== */


/* ==== 基礎公用設定 Start ==== */
body { background: url(../images/main_background.png); }
.pagesGrid , .pagesGrid * { transition: .3s;}

a { color:#666666; text-decoration:none; display: inline-block; vertical-align: middle; }
a:hover { color:#a3ad00; }
input[type="text"] { padding: .5rem; color: #666; vertical-align: middle; margin-right: 1rem; }
input:focus { outline: none !important; }

.btn { color: #fff; background-color: #8aa02a; padding: .5rem 1rem; display: inline-block; border-radius: .5rem; letter-spacing: .1rem; box-shadow: .1rem .1rem 0 #999; }
.btn:hover { color: #fff; background-color: #6c7261; }
.btn.newsBtn::before { content: '>'; font-size: .8rem; margin-right: .5rem; }
/* ==== 基礎公用設定 End ==== */