* { font-family: var( --DfFont ); }
header { width: 100%; height: var( --HeaderHeight ); padding: 0px; background-color: var( --DfColor ); }

header button { outline: 0px; background-color: transparent; border: none; border-radius: 3px; padding: 2px 8px; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

header ul { margin: 0px; padding: 0px; list-style-type: none; }
header .HeaderContent { display: flex; width: 100%; height: 100%; }
header .HeaderContent .HeaderLeft { display: flex; flex: auto; min-width: 410px; max-width: 500px; height: 100%; padding: var( --HLeftTBPadding ) 0px; padding-left: var( --LRMargin ); }
html[lang="zh-TW"] header .HeaderContent .HeaderLeft { min-width: 410px; max-width: 500px; }
header .HeaderContent .HeaderLeft a { display: flex; flex: auto; align-items: center; height: 100%; text-decoration: none; }
header .HeaderContent .HeaderLeft img { flex: none; height: 100% }
header .HeaderContent .HeaderLeft .HeaderTitle { padding: 0px 10px; flex: 1; font-size: 2.5rem; color: #FFFFFF; font-weight: 600; }
header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.4rem; }
header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn br { display: none; }
header .HeaderContent .HeaderCollegeBoard { display: none; flex: none; align-items: center; margin: 0px 15px; width: 160px; padding: var( --HLeftTBPadding ) 0px; }
header .HeaderContent .HeaderCollegeBoard img { width: 100%; height: max-content; }
header .HeaderContent .HeaderIlcedu { display: none; flex: none; align-items: center; margin: 0px 15px; width: 160px; padding: var( --HLeftTBPadding ) 0px; }
header .HeaderContent .HeaderIlcedu img { width: 100%; height: max-content; }
/* Menu 鈕 */
header .HeaderContent .HeaderMenuIcon { display: none; flex: none; align-items: center; width: min-content; padding: var( --HLeftTBPadding ) 0px; padding-right: var( --LRMargin ); }
header .HeaderContent .HeaderMenuIcon button {  }
header .HeaderContent .HeaderMenuIcon button span.material-symbols-outlined { font-size: 3rem; color: #FFFFFF; }

/* Nav */
header .HeaderContent .HeaderRight { flex: 1; flex-wrap: wrap; }
header .HeaderContent .HeaderRight .HeaderRTop { display: flex; justify-content: flex-end; width: 100%; height: 50%; padding-right: var( --LRMargin ); }
header .HeaderContent .HeaderRight .HeaderRTop ul { display: flex; flex-wrap: wrap; align-items: center; height: 100%; }
header .HeaderContent .HeaderRight .HeaderRTop ul li { display: flex; align-items: center; height: 100%; padding: 10px 10px; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard { padding: 8px 15px 12px; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard img { opacity: 0.9; height: 100%; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu { padding: 8px 15px 12px; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { opacity: 0.9; height: 80%; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC { padding: 10px 15px; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC span { font-size: 1rem; color: #FFFFFF; font-family: 'arial'; }
header .HeaderContent .HeaderRight .HeaderRTop ul li.Line {  }
header .HeaderContent .HeaderRight .HeaderRTop ul li.Line div { width: 1px; height: 80%; background-color: rgba( 255,255,255,0.6 ); }
header .HeaderContent .HeaderRight .HeaderRTop ul li a { padding: 5px 8px; font-size: 1.2rem; color: var( --LinkColor ); font-weight: 600; text-decoration: none; }
html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRTop ul li a { font-size: 1.4rem; }
header .HeaderContent .HeaderRight .HeaderRTop ul li a:hover { color: var( --LinkHoverColor ); }
header .HeaderContent .HeaderRight .HeaderRBottom { position: relative; width: 100%; height: 50%; padding: 0px var( --LRMargin ); background-color: #a74040; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList { display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li { display: flex; justify-content: center; align-items: center; flex: auto; height: 100%; padding: 10px 10px; text-align: center; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { padding: 5px 8px; font-size: 1.7rem; color: var( --LinkColor ); font-weight: 600; text-decoration: none; white-space: nowrap; }
html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { font-size: 1.8rem; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li > a:hover { color: var( --LinkHoverColor ); }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain { display: none; position: absolute; z-index: 10; top: 100%; left: 0px; width: 100%; padding: 0px; background-color: #a74040; border-top: solid 1px rgba( 255,255,255,0.6 ); }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain.Open { display: flex; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList { display: block; flex: 0.5; padding: 25px 35px; background-color: #943333; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li { flex: none; width: 100%; height: auto; padding: 7px 0px; text-align: left; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li a { font-size: 1.5rem; color: var( --LinkColor ); text-decoration: none; white-space: nowrap; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li a:hover { color: var( --LinkHoverColor ); }

header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList { display: flex; flex-wrap: wrap; padding: 5px 8px; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li { flex: none; width: 100%; padding: 3px 0px; }
html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li { width: calc( 100% / 3 ); padding: 0px 0px 8px; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li a { font-size: 1.2rem; }

header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents { flex: 1; padding: 25px 35px; text-align: left; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents .STitle { padding: 0px 0px 15px; font-size: 2rem; color: #ffef9f; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents .SContents { font-size: 1.4rem; line-height: 2.3rem; color: #FFFFFF; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubImage { display: flex; align-items: center; justify-content: center; flex: 0.6; padding: 25px 35px; padding-left: 0px; text-align: center; }
header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubImage img { height: 15vw; }


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

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 2.3rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.3rem; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { font-size: 1.3rem; }
}


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

	header .HeaderContent .HeaderLeft { min-width: 350px; max-width: 370px; }
	html[lang="zh-TW"] header .HeaderContent .HeaderLeft { min-width: 350px; max-width: 370px; }
	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.8rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 1.1rem; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { height: 70%; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { padding: 5px 5px; font-size: 1.2rem; }

    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents .SContents { font-size: 1.3rem; line-height: 2rem; }

}


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

	header { height: var(--HeaderHeight); }
	header .HeaderContent .HeaderLeft { min-width: 280px; max-width: 280px; }
	html[lang="zh-TW"] header .HeaderContent .HeaderLeft { min-width: 300px; max-width: 300px; }
	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.5rem; }
	header .HeaderContent .HeaderLeft .HeaderTitle .HeaderTitleEn { font-size: 0.9rem; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li { padding: 10px 5px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu { padding: 8px 10px 12px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { height: 60%; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard { padding: 8px 10px 12px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC { padding: 10px 10px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC span { font-size: 1rem; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li a { padding: 5px 5px; font-size: 1rem; }
	html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRTop ul li a { font-size: 1.2rem; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { padding: 5px 2px; font-size: 1rem; white-space: wrap; }

	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li {  }
	html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li { width: calc( 100% / 2 ); }

}

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

	header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC span { font-size: 0.9rem; }
	html[lang="zh-TW"] header .HeaderContent .HeaderRight .HeaderRTop ul li a { font-size: 1rem; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList { padding: 25px 25px; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents { flex: 1; padding: 25px 25px; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents .STitle { padding: 0px 0px 12px; font-size: 1.8rem; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubContents .SContents { font-size: 1.1rem; line-height: 1.8rem; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubImage { flex: 0.55; padding: 25px 25px; padding-left: 0px; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain .SubImage img { height: 14vw; }

}

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

	header { height: auto; }
	header .HeaderContent { display: flex; flex-wrap: wrap; }
	header .HeaderContent .HeaderLeft { flex: 1; min-width: initial; max-width: initial; height: var(--HeaderHeight); }
	html[lang="zh-TW"] header .HeaderContent .HeaderLeft { min-width: initial; max-width: initial; }
	header .HeaderContent .HeaderCollegeBoard { display: flex; width: 150px; height: var(--HeaderHeight); }
	header .HeaderContent .HeaderMenuIcon { display: flex; height: var(--HeaderHeight); }
	header .HeaderContent .HeaderMenuIcon button span.material-symbols-outlined.menu { display: inline-block; }
	header .HeaderContent .HeaderMenuIcon button span.material-symbols-outlined.close { display: none; }
	header .HeaderContent .HeaderMenuIcon button.MenuOpen span.material-symbols-outlined.menu { display: none; }
	header .HeaderContent .HeaderMenuIcon button.MenuOpen span.material-symbols-outlined.close { display: inline-block; }	
	header .HeaderContent .HeaderRight { display: none; flex: none; width: 100%; }
	header .HeaderContent .HeaderRight.Open { display: flex; border-top: solid 1px rgba(255, 255, 255, 0.5); }

	header .HeaderContent .HeaderRight .HeaderRTop { justify-content: center; height: auto; padding: 0px var(--LRMargin); }
	header .HeaderContent .HeaderRight .HeaderRTop ul { justify-content: center; padding-top: 20px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li { height: auto; }

	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu { display: block; text-align: center; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { height: 50px; }


	header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard { display: none; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC { display: block; width: 100%; text-align: center; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.WASC br { display: none; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Line { display: none; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li a { font-size: 1.5rem; font-weight: normal; }

	header .HeaderContent .HeaderRight .HeaderRBottom { height: auto; padding-bottom: 20px; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList { flex-wrap: wrap; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li { flex: none; flex-wrap: wrap; justify-content: flex-start; width: 100%; height: auto; }
    header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList > li > a { font-size: 1.8rem; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain { display: block; position: static; border: none; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList { display: flex; flex: none; flex-wrap: wrap; width: 100%; padding: 0px; background-color: transparent; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li { flex: none; margin-right: 25px; width: max-content; padding: 5px 0px; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li.SubBlock { width: 100%; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li a { font-size: 1.5rem; }

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

	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList { display: flex; flex-wrap: wrap; padding-left: 8px; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li ul.SubSubMenuList li { flex: none; width: max-content; padding: 3px 0px; }

}


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

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.4rem; }
	header .HeaderContent .HeaderCollegeBoard { width: 130px; }

	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu { display: block; text-align: center; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { max-width: 50%; height: auto; }
}


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

	header .HeaderContent .HeaderLeft .HeaderTitle { font-size: 1.6rem; }
	header .HeaderContent .HeaderCollegeBoard { display: none; }

	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu { display: block; text-align: center; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.Ilcedu img { max-width: 90%; height: auto; }

	header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard { display: block; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li.CollegeBoard img { height: 50px; }
	header .HeaderContent .HeaderRight .HeaderRTop ul li a { font-size: 1.3rem; }
	header .HeaderContent .HeaderRight .HeaderRBottom ul.MenuList li .SubMenuListMain ul.SubMenuList li a { font-size: 1.3rem; }

}