@charset "utf-8";
/* 較大尺寸的螢幕 - 1024px 以上 */
@media screen and (min-width: 1024px) {
.indexGrid { display: grid; grid-template-columns: 30rem auto; column-gap: 10rem;  position: relative;}
.indexGrid .gridBox_1 { grid-column: 1; grid-row: 1; }
.indexGrid .gridBox_2 { grid-column: 2; grid-row: 1; }
.indexGrid .gridBox_3 { grid-column: 1; grid-row: 2; }
.indexGrid .gridBox_4 { grid-column: 2; grid-row: 2; justify-self: end; width: var(--indexNavWidth); }
.indexGrid .gridBox_5 { grid-column: 1; grid-row: 3/5; z-index: -1; width: var(--indexBgWidth); height: var(--indexBgHeight); background: url(images/bg_04.jpg) no-repeat center / cover; position: absolute; }
.indexGrid .gridBox_6 { grid-column: 2; grid-row: 3; justify-self: end; width: var(--indexListWidth); align-self: flex-end; }
.indexGrid .gridBox_7 { grid-column: 2; grid-row: 4; justify-self: end; width: var(--indexListWidth); align-self: flex-start; }
.indexGrid .gridBox_8 { grid-column: 1/3; grid-row: 5; }

.logoLink { padding: 3rem 0 1.5rem; }

.mainNav > a { height: 3rem; }

.prodsBox { display: grid; grid-template-columns: repeat( 6 , 1fr); overflow-x: hidden; }
.newsList { grid-template-columns: 12rem auto; background: url(../images/pic_05.png) no-repeat; padding: .5rem 1rem 0 10rem; }
}


/* 桌上型電腦 */
@media screen and (min-width: 1367px) {
:root {
	--mainBoxWidth : 128rem;
	--indexBgWidth : calc( 83.4rem * 1.4 );
	--indexBgHeight : calc( 48.1rem * 1.4 );
	--indexNavWidth : 80rem;
	--indexListWidth : 75rem;
}

.indexGrid .gridBox_5 { left: -30%; }
.indexGrid .gridBox_6 { margin: 8rem 0 2.5rem; }
.indexGrid .gridBox_7 { margin-bottom: 7rem; }
.indexGrid .gridBox_8 { margin-bottom: 5rem; }

.mainNav > a { width: 12rem; }

.prodsBox { height: 14rem; padding: 1rem .5rem; }
.prodsBox > a { width: 10rem; height: 10rem; margin: 2rem 1rem; }

}

/* 筆記型電腦 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
:root {
	--mainBoxWidth : 95rem;
	--indexBgWidth : 83.4rem;
	--indexBgHeight : 48.1rem;
	--indexNavWidth : 55rem;
	--indexListWidth : 50rem;
}

.indexGrid .gridBox_5 { left: -25%; }
.indexGrid .gridBox_6 { margin: 4rem 0 1.5rem; }
.indexGrid .gridBox_7 { margin-bottom: 5rem; }
.indexGrid .gridBox_8 { margin-bottom: 3rem; }

.mainNav > a { width: 12rem; }

.prodsBox { height: 10rem; padding: 1rem .5rem;  }
.prodsBox > a { width: 7rem; height: 7rem; margin: 1rem .5rem; }
}


/* 較小螢幕的尺寸 - 1023px 以內 */
@media screen and (max-width: 1023px) {
:root{
	--indexBgWidth : 83.4rem;
	--indexBgHeight : 48.1rem;
}
html,body { overflow-x: hidden; background-color: #f6f1e8; }
.indexGrid { display: grid; padding: 0 2rem 2rem; gap: .5rem; position: relative;  z-index: 1; }
.indexGrid .gridBox_1 { grid-column: 1; grid-row: 1; text-align: center; }
.indexGrid .gridBox_2 { grid-column: 1; grid-row: 2; background-color: #f5efe3cc; }
.indexGrid .gridBox_3 { grid-column: 1; grid-row: 4; margin-top: 2rem; }
.indexGrid .gridBox_4 { grid-column: 1; grid-row: 3; }
.indexGrid .gridBox_5 { grid-column: 1; grid-row: 5; z-index: -1; width: var(--indexBgWidth); height: var(--indexBgHeight); background: url(images/bg_04.jpg) no-repeat center / cover; position: absolute; left: 30%; top: 20%; }
.indexGrid .gridBox_6 { grid-column: 1; grid-row: 6; background-color: #f5efe3dd; }
.indexGrid .gridBox_7 { grid-column: 1; grid-row: 7; background-color: #f5efe3dd; }
.indexGrid .gridBox_8 { grid-column: 1; grid-row: 8; background-color: #f5efe3aa; }

.logoLink { padding: 2rem 0 .5rem; }

.mobileHidden { display: none;}

.prodsBox { display: grid; padding: 1rem 0; }
.newsList > *:last-child { padding: 1rem 0;}
}

/* 平版 */
@media screen and (min-width: 481px) and (max-width: 1023px) {
:root{ 
	--prodsItemWidth : calc( ( 100vw - 17rem ) / 6 );
	--prodsBoxHiehgt : calc( var(--prodsItemWidth) + 2rem )
}
.prodsBox { grid-template-columns: repeat( 6 , 1fr); height: var(--prodsBoxHiehgt);  gap: 2rem 1rem; }
.prodsBox > a { width: var(--prodsItemWidth); height: var(--prodsItemWidth); }
.newsList { grid-template-columns: 12rem auto; background: url(../images/pic_05.png) no-repeat; padding: .5rem 1rem 0 10rem; }
}

/* 手機 */
@media screen and (max-width: 480px) {
:root{ 
	--prodsItemWidth : calc( ( 100vw - 8rem ) / 3 );
	--prodsBoxHiehgt : calc( var(--prodsItemWidth) * 2 + 2rem )
}

.indexGrid .gridBox_2 { position: sticky; top: 0; }
.indexGrid .gridBox_4 { position: sticky; top: 5rem; box-shadow:  0 0 1rem #00000099; }

.prodsBox { grid-template-columns: repeat( 3 , 1fr); height: var(--prodsBoxHiehgt);  gap: 1rem; }
.prodsBox > a { width: var(--prodsItemWidth); height: var(--prodsItemWidth); }
.newsList { grid-template-columns: 9rem auto; padding: .5rem 1rem 0 0; }
.newsList > *:nth-child(odd):not(:last-child) { font-size: 1.2rem; }
}

/* ==== 多頁公用設定 Start ==== */
a { color:#666666; text-decoration:none; display: inline-block; vertical-align: middle; }
a:hover { color:#a3ad00; }

.indexGrid , .indexGrid * { transition: .3s;}

body { background: url(../images/main_background.png); }

input[type="text"] { padding: .5rem; color: #666; vertical-align: middle; }
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 ==== */


/*  ==== 本頁公用設定 Start ==== */
.indexTitles { font-size: 2rem; color: #5c730a; box-shadow: 0 0 1rem #f5efe3; background-color: #f5efe3cc; padding: 1rem .5rem; letter-spacing: .1rem; }
.indexTitlesEn {font-size: 1.2rem; margin-left: .5rem;}
/*  ==== 本頁公用設定 End ==== */


/* ==== 本頁專用設定 Start ==== */
.mainBox { width: var(--mainBoxWidth); margin: 0 auto; }

.marqBox { flex: 1; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1rem; align-items: center; }
.marqBox .marquee { flex: 1; margin-right: 1rem; font-size: 2rem; padding: 1rem; border-bottom: .1rem dashed #ccc; }

.mainNav { background-color: #3a3a2b; 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; }

.prodsBox { overflow-y: hidden; }
.prodsBox > a { border-radius: 50%; border:.1rem solid #ccc; background: no-repeat center center / cover; }

.newsList { color: #666; display: grid; }
.newsList > .news_titles { overflow: hidden; text-overflow : ellipsis; white-space : nowrap; }
.newsList > * { vertical-align: bottom; line-height: 3rem; }

.copyright { color:#666; border-top: .1rem solid #a6a48d; padding: 2rem 0; }
.copyright > span { color: #999; font-size: 1.4rem; }
/* ==== 本頁專用設定 End ==== */