:root {
	--DfColor: #951d2a;
	--DfColor_1: #a87c31;
	--DfFont: 'Raleway';
	--LRMargin: 30px; /* 左右兩邊 */	
	--LinkColor: #951d2a;
	--LinkHoverColor: #951d2a;
	--HLeftTBPadding: 15px; /* 上方上下 內距 */

	--HeaderHeight: 120px;
	--FooterWidth: 95%;
}
* { font-family: var( --DfFont ); }

article { position: relative; }

header { position: relative; z-index: 15; width: 100%; height: var( --HeaderHeight ); padding: 0px; background-color: #FFFFFF; border-bottom: solid 2px #AAAAAA; }
header ul { margin: 0px; padding: 0px; }
header .HeaderContent { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; height: 100%; }
header .HeaderContent .HeaderLeft { position: relative; z-index: 10; display: flex; flex: auto; min-width: 410px; max-width: 500px; height: 100%; padding: var( --HLeftTBPadding ) 0px; padding-left: var( --LRMargin ); }
header .HeaderContent .HeaderLeft a { display: flex; flex: none; align-items: center; height: 100%; text-decoration: none; }
header .HeaderContent .HeaderLeft img { flex: none; height: 100% }
header .HeaderContent .HeaderLeft .HeaderTitle { padding: 0px 10px; flex: none; font-size: 2.5rem; color: var( --DfColor ); font-weight: 600; letter-spacing: 2px; }

html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle { letter-spacing: 0px; }

header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { line-height: 2.8rem; }
header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { line-height: 2.8rem; }
header .HeaderContent .HeaderLeft .HeaderTitle span { color: var( --DfColor ) }
header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.5rem; color: #333333; letter-spacing: 0px; }

html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { font-size: 3rem; line-height: 3.2rem; }
html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { font-size: 1.8rem; line-height: 2.3rem; }

/* Menu 鈕 */
header .HeaderContent .HeaderMobile { display: none; flex: none; align-items: center; width: min-content; padding: var( --HLeftTBPadding ) 0px; padding-right: var( --LRMargin ); }
header .HeaderContent .HeaderMobile button { display: flex; justify-content: center; align-items: center; border: solid 1px #dbdbdb; }
header .HeaderContent .HeaderMobile button span.material-symbols-outlined { font-size: 3rem; color: var(--DfColor); }

/* Nav */
header .HeaderContent .HeaderRight { flex: 1; flex-wrap: wrap; height: 100%; /*padding-right: var( --LRMargin );*/ }
header .HeaderContent .HeaderRight ul.MenuList { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 100%; }
header .HeaderContent .HeaderRight ul.MenuList > li { flex: none; width: max-content; height: 100%; }
header .HeaderContent .HeaderRight ul.MenuList > li > a { position: relative; display: flex; justify-content: center; align-items: center; flex: none; width: 130px; height: 100%; padding: 0px; text-align: center; font-size: 1.7rem; color: var( --LinkColor ); font-weight: 600; text-decoration: none; white-space: nowrap; }

html[lang="en-US"] header .HeaderContent .HeaderRight ul.MenuList > li > a { font-size: 1.5rem; }

header .HeaderContent .HeaderRight ul.MenuList > li > a::before { content: ''; position: absolute; top: 0; right: 22px; bottom: 0; left: -22px; background-color: #FFFFFF;  transform: skewX(-20deg); z-index: 0; }
header .HeaderContent .HeaderRight ul.MenuList > li > a::after { content: ''; position: absolute; top: 0; right: 152px; bottom: 0; left: -22px; background-color: #EEEEEE;  transform: skewX(-20deg); z-index: 1; transition: .3s; }
header .HeaderContent .HeaderRight ul.MenuList > li > a span { position: relative; z-index: 2; left: -22px; }
header .HeaderContent .HeaderRight ul.MenuList > li > a.This { /*color: #ffffff;*/ }
header .HeaderContent .HeaderRight ul.MenuList > li > a.This::before {  }

header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(1) > a { background-color: #951d2a; color: #FFFFFF; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(1) > a::before { background-color: #951d2a; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(1) > a::after { background-color: #8d1516; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(2) > a { background-color: #a87c31; color: #FFFFFF; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(2) > a::before { background-color: #a87c31; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(2) > a::after { background-color: #805917; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(3) > a { background-color: #e1e1e1; color: #222222; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(3) > a::before { background-color: #e1e1e1; }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(3) > a::after { background-color: #c5c5c5; }

header .HeaderContent .HeaderRight ul.MenuList > li > a.This::after { right: 22px; }
header .HeaderContent .HeaderRight ul.MenuList > li > a:nth-last-child(1).This::after { right: -21px; }

header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain { display: flex; position: absolute; z-index: 20; top: calc(100% + 0px); left: 0px; overflow: hidden; width: 100%; height: 0px; padding: 0px; background-color: #FFFFFF; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain.Open { height: fit-content; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList { display: block; flex: 0.5; padding: 25px 25px; border-right: solid 1px #cacaca; background-color: #dfdfdf; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li { flex: none; width: 100%; height: auto; padding: 10px 0px; text-align: left; border-bottom: dotted 1px #939393; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li:last-child { border-bottom: none; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li a { font-size: 1.5rem; color: #333333; text-decoration: none; white-space: nowrap; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li a:hover { color: var( --LinkHoverColor ); }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubContents { flex: 1; padding: 25px 25px; text-align: left; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubContents .STitle { padding: 0px 0px 15px; font-size: 2rem; color: #000000; font-weight: bold; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubContents .SContents { font-size: 1.2rem; line-height: 2.2rem; color: #3d3d3d; }

html[lang="en-US"] header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubContents .SContents { font-size: 1.1rem; line-height: 1.8rem; }

header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubImage { flex: 0.5; padding: 25px 25px 25px 0px; text-align: left; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubImage img { height: 14vw; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .BG { position: absolute; z-index: -1; left: -350px; overflow: hidden; width: 300px; height: 100%; background-color: #F1F1F1; transform: skewX(-20deg); transition: .5s; }
header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 3 - 1 ) ); }
/*
header .HeaderContent .HeaderRight ul.MenuList > li:nth-child(1) .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 1 - 1 ) ); }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-child(2) .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 2 - 1 ) ); }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-child(3) .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 3 - 1 ) ); }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-child(4) .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 4 - 1 ) ); }
header .HeaderContent .HeaderRight ul.MenuList > li:nth-child(5) .SubMenuListMain.Open .BG { left: calc( 100px + 150px * ( 5 - 1 ) ); }
*/
/* 置頂鈕 */
#ScrollTop { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 98; bottom: -60px; right: 30px; width: 45px; height: 45px; transition: .3s; }
#ScrollTop.Open { bottom: 30px; }
#ScrollTop button { display: flex; justify-content: center; align-items: center; margin: 0px; padding: 3px; width: 100%; height: 100%; background-color: rgb(192 153 86 / 80%); border-radius: 8px; }
#ScrollTop button:hover { background-color: rgb(166, 124, 52); }
#ScrollTop button span.material-symbols-outlined { color: #FFF; font-size: 3.5rem; }


footer { margin-top: 150px; background-color: #c09956; background-repeat: no-repeat; background-position: 200px calc( 100% + 50px ); background-size: 300px auto; }
footer .FooterContent { position: relative; margin: 0px auto; width: 100%; max-width: var( --FooterWidth ); padding: 30px 30px 30px; color: #FFFFFF; }
footer .FooterContent img.TopImage { position: absolute; right: 100px; top: -80px; width: 450px; }
footer .FooterContent .FooterMenu { margin: 20px auto 20px; width: 100%; padding-bottom: 20px; border-bottom: solid 1px rgba( 255,255,255,0.5 ); }
footer .FooterContent .FooterMenu ul.Menu { display: flex; flex-wrap: wrap; margin: 0px auto; width: fit-content; }
footer .FooterContent .FooterMenu ul.Menu > li { flex: 1; margin-bottom: 0px; padding-left: 8px; }
footer .FooterContent .FooterMenu ul.Menu > li > a { display: inline-block; padding: 3px 0px; font-size: 1.5em; color: #FFFFFF; font-weight: 600; }
footer .FooterContent .FooterMenu ul.Menu > li > a:hover {  }
footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu { display: flex; flex-wrap: wrap; }
footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu li { flex: none; width: 100%; }
footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu li a { display: inline-block; padding: 5px 0px; font-size: 1.2rem; color: #FFFFFF; }
footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu li a:hover { color: var( --LinkHoverColor ); }
footer .FooterContent .FooterTop { display: flex; justify-content: space-between; align-items: center; }
footer .FooterContent .FooterTop .Title { font-size: 3rem; }
footer .FooterContent .FooterTop .FooterCommunity { display: flex; }
footer .FooterContent .FooterTop .FooterCommunity a { display: block; flex: none; overflow: hidden; margin-left: 15px; width: 30px; height: fit-content; line-height: 0; border-radius: 5px; }
footer .FooterContent .FooterTop .FooterCommunity a img { width: 100%; }
footer .FooterContent .FooterTop .FooterCommunity a:hover { background-color: #FFFFFF; }
footer .FooterContent .FooterTop .FooterCommunity a.Line:hover img { filter: invert(48%) sepia(99%) saturate(499%) hue-rotate(87deg) brightness(90%) contrast(98%); }
footer .FooterContent .FooterTop .FooterCommunity a.FB:hover img { filter: brightness(0) saturate(100%) invert(26%) sepia(37%) saturate(5424%) hue-rotate(214deg) brightness(103%) contrast(105%); }
footer .FooterContent .Contents { display: flex; align-items: flex-end; margin: 0px 0px 0px; }
footer .FooterContent .Contents .ContentLeft { flex: 1; margin: 20px 0px 0px; }
footer .FooterContent .Contents .ContentLeft .Contact { font-size: 1.2rem; line-height: 2.3rem; }
footer .FooterContent .Contents .ContentLeft .Contact .Item { display: flex; align-items: center; }
footer .FooterContent .Contents .ContentLeft .Contact .Item span.material-symbols-outlined { margin-right: 5px; color: #FFFFFF; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24 }

footer .FooterContent .Contents .ContentRight { display: flex; flex: 1; justify-content: flex-end; margin: 20px 0px 0px; }

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

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 2.3rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { line-height: 2.6rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { line-height: 2.6rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.4rem; }

	footer .FooterContent .Contents .ContentRight ul.Menu li a { font-size: 1.3rem; }
}


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

	header .HeaderContent .HeaderLeft { min-width: 350px; max-width: 450px; }
	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 2rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { line-height: 2.3rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { line-height: 2.3rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.2rem; }

	html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { font-size: 2.8rem; line-height: 3rem; }
	html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { font-size: 1.2rem; line-height: 2rem; }

	footer .FooterContent .Title { font-size: 3.5rem; }
	footer .FooterContent .Contents .ContentLeft {  }

}


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

	:root {
		--LRMargin: 30px; /* 左右兩邊 */
		--HeaderHeight: 100px;
		--FooterWidth: 100%;
	}

	header {  }
	header .HeaderContent .HeaderLeft { min-width: 300px; max-width: 300px; }
	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.6rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { line-height: 1.9rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { line-height: 1.9rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1rem; }

	footer .FooterContent .Title { font-size: 2.5rem; }
	footer .FooterContent .Contents { flex-wrap: wrap; }
	footer .FooterContent .Contents .ContentLeft {  }
	footer .FooterContent .Contents .ContentRight {  }

}


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

	header .HeaderContent .HeaderRight ul.MenuList > li > a { width: 120px; font-size: 1.5rem; }
	html[lang="en-US"] header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li a { font-size: 1.2rem; }
}

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

	:root {
		--LRMargin: 15px;
		--HLeftTBPadding: 10px; /* 上方上下 內距 */
		--HeaderHeight: 80px;
		--FooterWidth: 100%;
	}

	body { margin-top: var( --HeaderHeight ); }
	header { position: fixed; z-index: 99; top: 0px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); }
	header .HeaderContent { display: flex; flex-wrap: wrap; }
	header .HeaderContent .HeaderLeft { flex: 1; min-width: initial; max-width: initial; height: var(--HeaderHeight); }
	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.3rem;  }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { line-height: 1.6rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { line-height: 1.6rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 0.82rem; }

	html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_T { font-size: 2.6rem; line-height: 2.8rem; }
	html[lang="en-US"] header .HeaderContent .HeaderLeft .HeaderTitle .WebHeaderitle_B { font-size: 1.2rem; line-height: 1.6rem; }

	header .HeaderContent .HeaderMobile { display: flex; height: var(--HeaderHeight); }
	header .HeaderContent .HeaderMobile button span.material-symbols-outlined.menu { display: inline-block; }
	header .HeaderContent .HeaderMobile button span.material-symbols-outlined.close { display: none; }
	header .HeaderContent .HeaderMobile button.MenuOpen span.material-symbols-outlined.menu { display: none; }
	header .HeaderContent .HeaderMobile button.MenuOpen span.material-symbols-outlined.close { display: inline-block; }	
	header .HeaderContent .HeaderRight { display: block; flex: none; overflow: hidden; width: 100%; height: 0px; background-color: #FFFFFF; border-top: solid 1px #b4b4b4; transition: height .3s; }
	header .HeaderContent .HeaderRight.Open { height: fit-content; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); border-bottom: solid 5px var( --DfColor ); }

	header .HeaderContent .HeaderRight ul.MenuList { display: block; padding: var( --LRMargin ); padding-top: 30px; }
	header .HeaderContent .HeaderRight ul.MenuList > li { margin-bottom: 20px; width: 100%; height: fit-content; }
	header .HeaderContent .HeaderRight ul.MenuList > li > a { display: flex; justify-content: flex-start; margin-bottom: 5px; width: auto; height: auto; }
	header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(1) > a { background-color: #FFFFFF; color: var(--DfColor); }
	header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(2) > a { background-color: #FFFFFF; color: var(--DfColor); }
	header .HeaderContent .HeaderRight ul.MenuList > li:nth-last-child(3) > a { background-color: #FFFFFF; color: var(--DfColor); }
	header .HeaderContent .HeaderRight ul.MenuList > li > a::before { display: none; }
	header .HeaderContent .HeaderRight ul.MenuList > li > a::after { display: none; }
	header .HeaderContent .HeaderRight ul.MenuList > li > a span { left: 0px; }

	header .HeaderContent .HeaderRight ul.MenuList > li.Language { position: absolute; top: 10px; right: var(--LRMargin); width: auto; }
	header .HeaderContent .HeaderRight ul.MenuList > li.Language > a { font-size: 1.3rem; font-weight: normal; }


	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain { display: block; position: static; height: fit-content; border: none; }
	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList { display: flex; flex: none; flex-wrap: wrap; width: 100%; padding: 0px; background-color: transparent; border: none }
	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li { flex: none; margin-right: 25px; width: max-content; padding: 5px 0px; }
	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li:last-child { border-bottom: dotted 1px #939393; }

	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li a { font-size: 1.3rem; }

	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubContents { display: none; }
	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain .SubImage { display: none; }

	#ScrollTop { right: var( --LRMargin ); }

	footer .FooterContent { padding: 30px var( --LRMargin ) 30px; }
	footer .FooterContent img.TopImage { right: 85px; }
	footer .FooterContent .FooterMenu { float: none; clear: both; }
	footer .FooterContent .FooterMenu ul.Menu > li > a { padding: 3px 0px; }
	footer .FooterContent .Contents .ContentRight ul.Menu > li { width: calc( 100% / 2 ); }
	footer .FooterContent .Contents .ContentRight ul.Menu > li > a { font-size: 1.5rem; }
	footer .FooterContent .Contents .ContentRight ul.Menu li ul.SubMenu li a { font-size: 1.3rem; }

}


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

	:root {
		--LRMargin: 10px; /* 左右兩邊 */
		--HLeftTBPadding: 8px; /* 上方上下 內距 */
		--HeaderHeight: 70px;
		--FooterWidth: 100%;
	}

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.4rem; }

	footer .FooterContent .FooterTop { display: block; }
	footer .FooterContent .FooterTop .Title { width: 100%; font-size: 2.3rem; }
	footer .FooterContent .FooterTop .FooterCommunity { justify-content: flex-end; margin: 10px 0px; width: 100%; }

	footer .FooterContent .FooterMenu { width: 100%; float: none; clear: both; margin: 20px 0px; padding: 10px 0px; border-top: solid 1px rgba( 255,255,255,0.5 ); border-bottom: solid 1px rgba( 255,255,255,0.5 ); }
	footer .FooterContent .FooterMenu ul.Menu { display: block; margin: 0px 20px; }
	footer .FooterContent .FooterMenu ul.Menu > li { margin-bottom: 15px; padding: 0px; }
	footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu { flex-wrap: wrap; }
	footer .FooterContent .FooterMenu ul.Menu li ul.SubMenu li { width: auto; margin-right: 15px; }

	footer .FooterContent .Contents { flex-wrap: wrap; }
	footer .FooterContent .Contents .ContentLeft { flex: none; width: 100%; }
	footer .FooterContent .Contents .ContentRight { flex: none; width: 100%; }

}


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

	:root {
		--HeaderHeight: 70px;
	}

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.4rem; }

	header .HeaderContent .HeaderRight ul.MenuList > li .SubMenuListMain ul.SubMenuList li a { font-size: 1.3rem; }

	footer .FooterContent .FooterMenu ul.Menu { display: block; }
	footer .FooterContent .FooterMenu ul.Menu > li { padding: 0px 8px 10px 0px; }

    footer .FooterContent .Contents .ContentRight ul.Menu > li { width: 100%; }

}