:root {
	--DfContentsWidth: 1300px;
	--DfContentsMargin: 50px;
}

section.PageTitle { position: relative; width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; }
section.PageTitle .PageTitleContent { position: absolute; z-index: 3; bottom: 30px; width: 100%; padding: 10px; text-align: right; font-size: 2.2rem; color: #000000; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); background-color: rgba( 255,255,255,0.5 ); }
section.PageTitle .PageTitleImage1 { position: absolute; z-index: 2; top: 0px; width: 100%; height: calc( 100% - 30px ); background-size: 100% auto; background-repeat: no-repeat; }
section.PageTitle .PageTitleImage2 { position: absolute; z-index: 1; top: 0px; width: 100%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; }

article[sc="Philosophy"] section.PageTitle .PageTitleImage1 { background-position: center -50px; }
article[sc="Philosophy"] section.PageTitle .PageTitleImage2 { background-position: center -50px; }

h1 { margin-bottom: 15px; text-align: center; font-size: 5rem; color: var(--DfColor); line-height: 5rem; }

section.SubChannelMenuContainer { margin: var(--DfContentsMargin) auto; width: 100%; max-width: var(--DfContentsWidth); padding: 0px var(--LRMargin); transition: all 0.3s; }
section.SubChannelMenuContainer .SubChannelTitle { display: none; align-items: center; justify-content: space-between; width: 100%; padding: 10px 8px; border-radius: 5px; background-color: var(--DfColor); color: #FFFFFF; cursor: pointer; }
section.SubChannelMenuContainer .SubChannelTitle .Title { color: #FFFFFF; font-size: 1.6rem; }
section.SubChannelMenuContainer .SubChannelTitle span.material-symbols-outlined { color: #FFFFFF; transition: all 0.3s; }
section.SubChannelMenuContainer .MainSubChannelMenu { display: grid; grid-template-rows: 1fr; overflow: hidden; width: 100%; transition: all 0.3s; }

ul.SubChannelMenu { display: flex; flex-wrap: wrap; justify-content: center; margin: 0px auto; padding: 0px; list-style: none; }
ul.SubChannelMenu li { flex: none; padding: 0px 8px 8px; }
ul.SubChannelMenu li a { display: block; padding: 5px 16px; font-size: 1.5rem; color: var(--DfColor); background-color: #FFFFFF; border: solid 1px var(--DfColor); border-radius: 5px; }
html[lang="en-US"] ul.SubChannelMenu li a { font-size: 1.2rem; }
ul.SubChannelMenu li a:hover { background-color: #efdddd; transition: all 0.3s; }
ul.SubChannelMenu li a.This { background-color: var(--DfColor); color: #FFFFFF; }

section.Contents { position: relative; margin: var(--DfContentsMargin) auto; width: 100%; max-width: var(--DfContentsWidth); padding: 0px var(--LRMargin); }
section.Contents h2.SubTitle { position: relative; margin-bottom: 20px; margin-left: 20px; width: fit-content; color: var(--DfColor); font-size: 2.2rem; }
section.Contents h2.SubTitle .Circle_1 { position: absolute; z-index: -1; left: -20px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background-color: var(--DfColor); }
section.Contents h2.SubTitle .Circle_2 { position: absolute; z-index: -1; left: -5px; top: -6px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--DfColor); }
section.Contents h2.SubTitle .Circle_3 { position: absolute; z-index: -1; right: -5px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background-color: #e8e8e8; }
section.Contents .LineDraw { position: relative; z-index: -2; width: 100%; height: 20px; }
section.Contents div.SubContents h3 { margin-top: 50px; font-size: 1.8rem; }
section.Contents div.SubContents h3:first-child { margin-top: 20px; }

section.Contents div.SubContents { margin-bottom: 50px; }
section.Contents div.SubContents p { /*text-indent: 2em;*/ font-size: 1.4rem; line-height: 2.5rem; }
section.Contents div.SubContents p .ItemTitle { padding: 3px 5px; background-color: #c8e7ef; border-radius: 3px; }

section.Contents div.SubImageMain { margin: 0px auto; width: 100%; }
section.Contents div.SubImageMain .SubImage { display: flex; flex-wrap: wrap; width: 100%; }
section.Contents div.SubImageMain[c="1"] .SubImage img { flex: none; width: calc( 100% / 1 ); }
section.Contents div.SubImageMain[c="2"] .SubImage img { flex: none; width: calc( 100% / 2 ); }
section.Contents div.SubImageMain[c="3"] .SubImage img { flex: none; width: calc( 100% / 3 ); }

section.Contents.PhilosophyImage { max-width: 100%; padding: 0px; }
section.Contents div.SubImageMain { position: relative; }
section.Contents div.SubImageMain .SubBg { position: absolute; z-index: -1; top: calc( 100% / 4 ); left: 0px; width: 100%; height: calc( 100% / 2 ); background-color: #e8e8e8; }
section.Contents div.SubImageMain .SubImage { justify-content: center; width: 100%; padding: 0px var(--LRMargin); }
section.Contents div.SubImageMain .SubImage img { max-width: 100%; }

section.Contents div.SubContentsImage { display: flex; justify-content: space-between; align-items: flex-start; }
section.Contents div.SubContentsImage .SubImage { flex: none; margin: 15px 30px 0px 0px; width: 40%; height: 300px; border: solid 1px #e8e8e8; border-radius: 5px; background-color: #ececec; }
section.Contents div.SubContentsImage .SubContents { flex: 1; }

section.Contents div.SubContents table.TableContents { border-collapse: collapse; }
section.Contents div.SubContents table.TableContents th, 
section.Contents div.SubContents table.TableContents td { padding: 8px; border: solid 1px #999999; font-size: 1.4rem; line-height: 2.5rem; }
section.Contents div.SubContents table.TableContents th { background-color: #c8e7ef; }
section.Contents div.SubContents table.TableContents td .TdBr { display: inline; }


/*頁次*/
section.PageLink { margin: 30px auto; text-align: center; }
section.PageLink ul#PageUl { display: flex; justify-content: center; margin: 20px 0px 10px; }
section.PageLink ul#PageUl li { flex: none; width: max-content; display: flex; margin: 0px 5px; align-items: center; }
section.PageLink ul#PageUl li.PageLiNum {  }
section.PageLink ul#PageUl li.PageLiNum button { width: max-content; padding: 4px 10px; background-color: #EEEEEE; font-size: 1.5rem; line-height: 1.5rem; color: #555555; }
section.PageLink ul#PageUl li.PageLiNum button[v=''] { background-color: var(--DfColor); color: #FFFFFF; }
section.PageLink ul#PageUl li.PageLiNum button[v='']:hover { background-color: var(--DfColor); color: #FFFFFF; }
section.PageLink ul#PageUl li button { display: flex; justify-content: center; align-items: center; height: 100%; padding: 5px 6px; border-radius: 5px; background-color: #EEEEEE; color: #555555; }
section.PageLink ul#PageUl li button:hover { background-color: var(--DfColor); color: #FFFFFF; cursor: pointer; }
section.PageLink ul#PageUl li button span.material-symbols-outlined { color: #555555; }
section.PageLink ul#PageUl li button:hover span.material-symbols-outlined { color: #FFFFFF; }
section.PageLink ul#PageUl li button[v=''] { background-color: #c8c8c8; }
section.PageLink ul#PageUl li button[v='']:hover { background-color: #c8c8c8; }
section.PageLink ul#PageUl li button[v=''] span.material-symbols-outlined { color: #FFF; }



section.TagNav { margin: var(--DfContentsMargin) auto; width: 100%; max-width: var(--DfContentsWidth); padding: 0px var(--LRMargin); }
section.TagNav .Line { width: 100%; height: 1px; background-image: linear-gradient(to right, #DDDDDD 0%, #DDDDDD 85%, transparent 100%); }
section.TagNav .TagList { position: relative; margin: 15px 0px; width: 100%; }
section.TagNav .TagList:after { position: absolute; right: 0px; top: 0px; width: 30px; height: 100%; background-image: linear-gradient(to right, transparent 0%, transparent 15%, #FFFFFF 85%, #FFFFFF 100% ); content: ' '; }
section.TagNav ul { display: flex; align-items: center; overflow: auto;  }
section.TagNav ul li { flex: none; padding: 0px 8px; }
section.TagNav ul li a { display: block; padding: 5px 10px; border-radius: 8px; background-color: #EEEEEE; font-size: 1.2rem; color: #333; }
section.TagNav ul li a:hover { background-color: #CCCCCC; }
section.TagNav ul li a.This { background-color: #333; color: #FFFFFF; }

article section.Contents img.TitleBgImage { position: absolute; z-index: -1; right: 15px; }
article[sc="About"] section.Contents img.TitleBgImage { top: -30px; width: 250px; }
article[sc="Introduction"] section.Contents img.TitleBgImage { top: -60px; width: 150px; }
article[sc="Syllabus"] section.Contents img.TitleBgImage { top: -15px; width: 300px; }
article[sc="Apply"] section.Contents img.TitleBgImage { top: -30px; width: 140px; }
article[sc="Consultation"] section.Contents img.TitleBgImage { top: -15px; width: 250px; }
article[sc="ContactInfo"] section.Contents img.TitleBgImage { top: -15px; width: 200px; }
article[sc="Location"] section.Contents img.TitleBgImage { top: -15px; width: 200px; }

article[sc="News"] section.Contents.List { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --LRMargin ); }
article[sc="News"] section.Contents.List .Item {  }
article[sc="News"] section.Contents.List .Item a { display: block; }
article[sc="News"] section.Contents.List .Item a .MainPhoto { display: block; width: 100%; height: 280px; overflow: hidden; border-radius: 5px; }
article[sc="News"] section.Contents.List .Item a .MainPhoto .Photo { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: transform .3s ease-out; }
article[sc="News"] section.Contents.List .Item a .StartDate { margin: 5px 0px; font-size: 1.5rem; color: #555555; }
article[sc="News"] section.Contents.List .Item a .Subject { margin: 5px 0px ;font-size: 1.8rem; color: #333333; }
article[sc="News"] section.Contents.List .Item a ul.TagList { display: flex; align-items: center; margin: 15px 0px; width: 100%; }
article[sc="News"] section.Contents.List .Item a ul.TagList li { flex: none; padding: 0px 8px 0px 0px; }
article[sc="News"] section.Contents.List .Item a ul.TagList li button { display: block; height: auto; padding: 3px 10px; border-radius: 8px; background-color: #EEEEEE; font-size: 1.1rem; color: #333; }
article[sc="News"] section.Contents.List .Item a ul.TagList li button:hover { background-color: #CCCCCC; }
article[sc="News"] section.Contents.List .Item a:hover {  }
article[sc="News"] section.Contents.List .Item a:hover .Subject { color: var(--DfColor); }
article[sc="News"] section.Contents.List .Item a:hover .MainPhoto .Photo { transform: scale(1.1); }

article[sc="News"] section.Contents.Single {  }
article[sc="News"] section.Contents.Single .Subject { font-weight: bold; font-size: 3rem; }
article[sc="News"] section.Contents.Single .Date { width: 100%; text-align: left; font-size: 1.3rem; color: #555555; }
article[sc="News"] section.Contents.Single .TagList { margin: 15px 0px; width: 100%; }
article[sc="News"] section.Contents.Single .TagList ul { display: flex; align-items: center; }
article[sc="News"] section.Contents.Single .TagList ul li { flex: none; padding: 0px 8px 0px 0px; }
article[sc="News"] section.Contents.Single .TagList ul li button { display: block; height: auto; padding: 3px 10px; border-radius: 8px; background-color: #EEEEEE; font-size: 1.1rem; color: #333; }
article[sc="News"] section.Contents.Single .TagList ul li button:hover { background-color: #CCCCCC; }
article[sc="News"] section.Contents.Single .MainImage { overflow: hidden; width: 50%; line-height: 0; border-radius: 10px; }
article[sc="News"] section.Contents.Single .MainImage img { width: 100%; }
article[sc="News"] section.Contents.Single .HTMLContents { margin: 15px 0px; font-size: 1.5rem; line-height: 2.5rem; }


article[sc="Activities"] section.Contents.List { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --LRMargin ); }
article[sc="Activities"] section.Contents.List .Item {  }
article[sc="Activities"] section.Contents.List .Item a { display: block; }
article[sc="Activities"] section.Contents.List .Item a .MainPhoto { display: block; width: 100%; height: 280px; overflow: hidden; border-radius: 5px; }
article[sc="Activities"] section.Contents.List .Item a .MainPhoto .Photo { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: transform .3s ease-out; }
article[sc="Activities"] section.Contents.List .Item a .StartDate { margin: 5px 0px; font-size: 1.5rem; color: #555555; }
article[sc="Activities"] section.Contents.List .Item a .Subject { margin: 5px 0px ;font-size: 1.8rem; color: #333333; }
article[sc="Activities"] section.Contents.List .Item a .EventDate { font-size: 1.2rem; color: var(--DfColor); }
article[sc="Activities"] section.Contents.List .Item a ul.TagList { display: flex; align-items: center; margin: 15px 0px; width: 100%; }
article[sc="Activities"] section.Contents.List .Item a ul.TagList li { flex: none; padding: 0px 8px 0px 0px; }
article[sc="Activities"] section.Contents.List .Item a ul.TagList li button { display: block; height: auto; padding: 3px 10px; border-radius: 8px; background-color: #EEEEEE; font-size: 1.1rem; color: #333; }
article[sc="Activities"] section.Contents.List .Item a ul.TagList li button:hover { background-color: #CCCCCC; }
article[sc="Activities"] section.Contents.List .Item a:hover {  }
article[sc="Activities"] section.Contents.List .Item a:hover .Subject { color: var(--DfColor); }
article[sc="Activities"] section.Contents.List .Item a:hover .MainPhoto .Photo { transform: scale(1.1); }

article[sc="Activities"] section.Contents.Single {  }
article[sc="Activities"] section.Contents.Single .Subject { font-weight: bold; font-size: 3rem; }
article[sc="Activities"] section.Contents.Single .Date { width: 100%; text-align: left; font-size: 1.3rem; color: #555555; }
article[sc="Activities"] section.Contents.Single .TagList { margin: 15px 0px; width: 100%; }
article[sc="Activities"] section.Contents.Single .TagList ul { display: flex; align-items: center; }
article[sc="Activities"] section.Contents.Single .TagList ul li { flex: none; padding: 0px 8px 0px 0px; }
article[sc="Activities"] section.Contents.Single .TagList ul li button { display: block; height: auto; padding: 3px 10px; border-radius: 8px; background-color: #EEEEEE; font-size: 1.1rem; color: #333; }
article[sc="Activities"] section.Contents.Single .TagList ul li button:hover { background-color: #CCCCCC; }
article[sc="Activities"] section.Contents.Single .MainImage { overflow: hidden; width: 50%; line-height: 0; border-radius: 10px; }
article[sc="Activities"] section.Contents.Single .MainImage img { width: 100%; }
article[sc="Activities"] section.Contents.Single .EventDate { margin: 10px 0px; font-size: 1.5rem; color: var(--DfColor); }
article[sc="Activities"] section.Contents.Single .EventDate span { font-size: 1.7rem; }
article[sc="Activities"] section.Contents.Single .HTMLContents { margin: 15px 0px; font-size: 1.5rem; line-height: 2.5rem; }

article[sc="Environment"] section.Contents.Gallery {  }
article[sc="Environment"] section.Contents.Gallery .Item { margin-bottom: 20px; }
article[sc="Environment"] section.Contents.Gallery .Item .Title { font-size: 1.8rem; color: var(--DfColor); }
article[sc="Environment"] section.Contents.Gallery .Item .ItemContents { margin: 5px 0px; font-size: 1.3rem; line-height: 2.5rem; color: #555555; }
article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery { position: relative; display: flex; width: 100%; height: 200px; overflow: hidden; }
article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery .ImageMain { display: flex; width: 100%; height: auto; }
article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery:after { position: absolute; right: 0px; top: 0px; width: 30px; height: 100%; background-image: linear-gradient(to right, transparent 0%, transparent 15%, #FFFFFF 85%, #FFFFFF 100%); content: ' ';
}
article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery .ImageMain .GalleryItem { flex: none; padding-right: 15px; width: auto; height: 100%; }
article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery .ImageMain .GalleryItem a.PhotoItem { display: block; width: 100%; height: 100%; border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; }


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

article[sc="News"] section.Contents.List .Item a .MainPhoto { height: 20vw; }
article[sc="Activities"] section.Contents.List .Item a .MainPhoto { height: 20vw; }

}


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

article[sc="Environment"] section.Contents.Gallery .Item .PhotoGallery {  }

}


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

:root {
	--DfContentsMargin: 40px;
}

article section.Contents img.TitleBgImage { display: none; }

section.PageTitle .PageTitleContent { font-size: 1.8rem; }

article[sc="Philosophy"] section.PageTitle .PageTitleImage1 { background-position: center -20px; }
article[sc="Philosophy"] section.PageTitle .PageTitleImage2 { background-position: center -20px; }

section.SubChannelMenuContainer.Open {  }
section.SubChannelMenuContainer .SubChannelTitle { display: flex; }
section.SubChannelMenuContainer .MainSubChannelMenu { grid-template-rows: 0fr; }
section.SubChannelMenuContainer.Open .MainSubChannelMenu { grid-template-rows: 1fr; }
section.SubChannelMenuContainer.Open .SubChannelTitle { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
section.SubChannelMenuContainer.Open .SubChannelTitle span.material-symbols-outlined { transform:rotate(180deg) }

ul.SubChannelMenu { display: flex; flex-wrap: wrap; width: 100%; min-height: 0; }
ul.SubChannelMenu li { flex: none; width: 100%; padding: 0px; }
ul.SubChannelMenu li a { padding: 8px 16px; border: none; border-bottom: solid 1px var(--DfColor); border-radius: 0px; font-size: 1.3rem; }
ul.SubChannelMenu li a:hover { background-color: #efdddd; transition: all 0.3s; }
ul.SubChannelMenu li a.This { background-color: #c25763; color: #FFFFFF; }

section.Contents div.SubContents table.TableContents td .TdBr { display: block; }

}


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

h1 { font-size: 3rem; line-height: 3rem; }

section.PageTitle { height: 100px; }
section.PageTitle .PageTitleContent { bottom: 10px; padding: 5px; font-size: 1.5rem; }
section.PageTitle .PageTitleImage1 { height: calc(100% - 10px); }

article[sc="News"] section.Contents.List { display: grid; grid-template-columns: repeat(1, 1fr); gap: var( --LRMargin ); }
article[sc="News"] section.Contents.List .Item a .MainPhoto { height: 60vw; }

article[sc="News"] section.Contents.Single .MainImage { width: 100%; }
article[sc="News"] section.Contents.Single .MainImage img { width: 100%; }

article[sc="Activities"] section.Contents.List { display: grid; grid-template-columns: repeat(1, 1fr); gap: var( --LRMargin ); }
article[sc="Activities"] section.Contents.List .Item a .MainPhoto { height: 60vw; }

article[sc="Activities"] section.Contents.Single .MainImage { width: 100%; }
article[sc="Activities"] section.Contents.Single .MainImage img { width: 100%; }

}


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

	section.Contents div.SubContentsImage { display: block; }
	section.Contents div.SubContentsImage .SubImage { margin: 15px auto; width: 95%; max-width: 300px; height: 400px; }
	section.Contents div.SubContentsImage .SubContents { flex: 1; }

}