:root {
	--DfSectionWidth: 1300px;
	--DfSectionPadding: 50px 0px;
}

article {  }
article section { margin: 0 auto; }

article section#ImageDiv { position: relative; width: 100%; }
article section#ImageDiv #Image { position: relative; overflow: hidden; width: 100%; height: 40vw; margin: 0 auto; -webkit-transform: translateZ(0); }

article section#ImageDiv #Image .ImageBtn { position: absolute; top: calc( 50% - 35px ); z-index: 100; display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border-radius: 50%; cursor: pointer; background-color: rgba(0, 0, 0, 0.5); }
article section#ImageDiv #Image .ImageBtn:hover { background-color: rgba(0, 0, 0, 0.8); }
article section#ImageDiv #Image .ImageBtn.BtnLeft { left: 15px; }
article section#ImageDiv #Image .ImageBtn.BtnRight { right: 15px; }
article section#ImageDiv #Image .ImageBtn span.material-symbols-outlined { color: #FFFFFF; font-size: 6rem; }

article section#ImageDiv #Image .ImageMain { width: 2910px; height: auto; overflow: hidden; }
article section#ImageDiv #Image .ImageMain:after { display: block; clear: both; height: 0; content: ''; }
article section#ImageDiv #Image .ImageMain .Item { position: relative; float: left; height: 100%; overflow: hidden; font-size: 0px; text-align: center; background: #EFEFEF; color: #666; background-size: cover; background-position: center; }
article section#ImageDiv #Image .ImageMain .Item.Video { width: 100%; height: 720px; overflow: hidden; }
article section#ImageDiv #Image .ImageMain .Item img { width: 100%; }

article section#ImageDiv #Image .ImageMain.Move { position: relative; }
article section#ImageDiv #Image .ImageMain.Move .Item { float: none; clear: both; position: absolute; opacity: 0; }
article section#ImageDiv #Image .ImageMain .Item .TextMain { position: absolute; z-index: 5; bottom: 30px;  margin-top: 50px; width: 100%; opacity: 0; transition: 2.5s; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { display: flex; justify-content: flex-end; flex-wrap: wrap; margin: 0 auto; width: auto; padding: 40px; background-image: linear-gradient(to right, transparent, rgba( 0,0,0,0.8 )); text-align: center; font-size: 5rem; color: #FFF; text-shadow: 0px 3px 3px rgba( 0,0,0,0.4 ); }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { display: block; flex: none; width: 100%; line-height: 70px; text-align: right; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span.TW {  }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span.EN {  }
article section#ImageDiv #Image .ImageMain .Item.Open .TextMain { opacity: 1; margin-top: 0px; }
article section#ImageDiv #Image .ImageMain.Move .Item.Open { opacity: 1; }

article section#ImageDiv #Image #MarqueePointer { position: absolute; bottom: 0px; display: none; height: 30px; }
article section#ImageDiv #Image #MarqueePointer.Open { display: flex; justify-content: center; align-items: center; width: 100%; }
article section#ImageDiv #Image #MarqueePointer ul.Pointer { list-style-type: none; }
article section#ImageDiv #Image #MarqueePointer ul.Pointer:after { float: none; clear: both; content: ''; display: block; height: 0; overflow: hidden; }
article section#ImageDiv #Image #MarqueePointer ul.Pointer li { float: left; margin-left: 5px; height: 10px; width: 10px; border-radius: 8px; background-color: rgba(183, 183, 183, 0.8); border: solid 1px rgba( 0,0,0,0.5 ); transition: .3s; }
article section#ImageDiv #Image #MarqueePointer ul.Pointer li.Current { background-color: #ffffff; width: 20px; border: solid 1px rgba( 0,0,0,0.5 ); }


article section.KeyWord { width: 100%; max-width: var(--DfSectionWidth); padding: var(--DfSectionPadding); }
article section.KeyWord h2.TW { position: relative; width: 100%; padding: 0px calc( 12.5% - 5px ); }
article section.KeyWord h2.TW .Contents { position: relative; z-index: 2; width: fit-content; padding: 0px 5px; background-color: #FFFFFF; color: var(--DfColor_1); font-size: 2.5rem;  }
article section.KeyWord h2.TW .LineDraw { position: absolute; left: 0px; top: calc(50% - 10px); width: 100%; height: 20px; }
article section.KeyWord h2.EN { position: relative; width: 100%; padding: 0px calc( 12.5% - 5px ); }
article section.KeyWord h2.EN .Contents { position: relative; z-index: 2; width: fit-content; padding: 0px 5px; background-color: #FFFFFF; color: var(--DfColor); font-size: 3rem; font-family: "Edu AU VIC WA NT Guides"; font-weight: 600; }

/*
article section.KeyWord h2.EN::before { position: absolute; z-index: 1; left: 0px; top: calc( 50% ); width: 100%; height: 1px; content: ''; display: block; background-image: linear-gradient(to right, transparent 0%, var(--DfColor) 15%, var(--DfColor) 85%, transparent 100% ); }
*/
article section.KeyWord p { margin: 0 auto; width: 75%; padding: 0px 0px; color: #333333; font-size: 1.6rem; line-height: 35px; }

article section.News { width: 100%; background-color: #f7f7f7; padding: var(--DfSectionPadding); }
article section.News .NewsContents { margin: 0 auto; width: 100%; max-width: var(--DfSectionWidth); }
article section.News .NewsContents h2 { margin: 0 auto 40px; width: 100%; max-width: 200px; padding-bottom: 10px; text-align: center; font-size: 36px; border-bottom: solid 5px #626262; }
article section.News .NewsContents h2 span:first-child { color: #c04b19; }
article section.News .NewsContents h2 span:last-child { color: #5d1c00; }
article section.News .NewsContents .NewsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --LRMargin ); margin: 0 auto; padding: 0 var( --LRMargin ); }
article section.News .NewsContents .NewsGrid a.NewsCard { position: relative; border-radius: 10px;  }
article section.News .NewsContents .NewsGrid a.NewsCard .Date { position: absolute; z-index: 1; top: -15px; left: -15px; width: 80px; height: 80px; background: #5d1c00; color: #FFFFFF; padding: 8px 15px; border-radius: 50%; text-align: center; line-height: 1.2; }
article section.News .NewsContents .NewsGrid a.NewsCard .Date .Month { display: block; width: 90%; text-align: left; font-size: 1.9rem; }
article section.News .NewsContents .NewsGrid a.NewsCard .Date .Line { background-color: #924625; width: 50px; height: 3px;transform:rotate(-15deg); }
article section.News .NewsContents .NewsGrid a.NewsCard .Date .Day { display: block; width: 90%; text-align: right; font-size: 2.3rem; font-weight: bold; }
article section.News .NewsContents .NewsGrid a.NewsCard .ImageMain { width: 100%; height: 230px; overflow: hidden; border-radius: 10px; }
article section.News .NewsContents .NewsGrid a.NewsCard .ImageMain .Image { width: 100%; height: 100%; background: #E8D5C4; background-position: center; background-size: cover; transition: transform .3s ease-out; }
article section.News .NewsContents .NewsGrid a.NewsCard h3 { margin: 0px 0px; padding: 10px 5px; color: #8B2F2F; font-size: 2rem; }
article section.News .NewsContents .NewsMore { margin: 30px 0 0; text-align: center; }
article section.News .NewsContents .NewsMore a { display: inline-block; margin: 0px 5px; padding: 10px 30px; border: 1px solid #666; border-radius: 20px; color: #666; font-size: 1.2rem; }
article section.News .NewsContents .NewsMore a:hover { background-color: var(--DfColor);  border: solid 1px var(--DfColor); color: #FFFFFF; }
article section.News .NewsContents .NewsGrid a.NewsCard:hover { background-color: #e5e5e5; }
article section.News .NewsContents .NewsGrid a.NewsCard:hover .ImageMain .Image { transform: scale(1.1); }

article section.Education { width: 100%; background-color: #FFFFFF; padding: var(--DfSectionPadding); }
article section.Education .EducationContent { width: 100%; background-color: #fff2db; }
article section.Education .EducationContent .EducationSubContent { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; width: 100%; max-width: var(--DfSectionWidth); padding: 0 var( --LRMargin ); }
article section.Education .EducationContent .EducationSubContent .EducationImage { position: relative; z-index: 2; flex: none; width: 45%; height: 318px; background-position: center; background-size: calc( 100% + 200px ) auto; background-repeat: no-repeat; }
article section.Education .EducationContent .EducationSubContent .EducationImage .EducationSubImage { position: absolute; z-index: 1; top: -100px; left: -100px; width: calc( 100% + 200px ); height: calc( 100% + 200px ); background-position: center; background-size: 100% auto; background-repeat: no-repeat; }
article section.Education .EducationContent .EducationSubContent .EducationText { position: relative; z-index: 3; flex: 1; padding-left: 80px; }
article section.Education .EducationContent .EducationSubContent .EducationText h3 { font-size: 2rem; color: #825400; }
article section.Education .EducationContent .EducationSubContent .EducationText p { font-size: 1.5rem; line-height: 30px; }

article section.Feature { width: 100%; background-color: #FFFFFF; padding: var(--DfSectionPadding); }
article section.Feature .FeatureContents { margin: 0 auto; width: 100%; max-width: var(--DfSectionWidth); }
article section.Feature .FeatureContents .FeatureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var( --LRMargin ); margin: 0 auto; padding: 0 var( --LRMargin ); }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard { display: block; position: relative; padding: 10px; border-radius: 10px; border: solid 4px #7e0000; transition: .3s; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard .FeatureCardIcon { float: right; width: 20%; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard .FeatureCardIcon img { width: 100%; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard h3 { margin: 0px; font-size: 2rem; color: #7e0000; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard p { margin: 10px 0px; font-size: 1.3rem; color: #7e0000; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard:hover { background-color: #7e0000; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard:hover h3 { color: #FFFFFF; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard:hover p { color: #FFFFFF; }


article section.Gallery { margin: var(--DfSectionPadding); width: 100%; background-color: #dfdfdf; padding: 0px 0px; }
article section.Gallery .GalleryContents { margin: 0 auto; width: 100%; max-width: var(--DfSectionWidth); }
article section.Gallery .GalleryContents .GalleryGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; margin: 0 auto; padding: 0 var( --LRMargin ); }
article section.Gallery .GalleryContents .GalleryGrid .GalleryItem { position: relative; overflow: hidden; height: 200px; padding: 0px; border: solid 1px #FFFFFF; }
article section.Gallery .GalleryContents .GalleryGrid .GalleryItem a.PhotoItem { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: transform .3s ease-out; }
article section.Gallery .GalleryContents .GalleryGrid .GalleryItem a.PhotoItem:hover { transform: scale(1.1); }


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

article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 30px; font-size: 4rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 60px; }

}


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

article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 20px; font-size: 3rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 50px; }

}


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

article section#ImageDiv #Image .ImageBtn { top: calc( 50% - 25px ); width: 50px; height: 50px; }
article section#ImageDiv #Image .ImageBtn.BtnLeft { left: 10px; }
article section#ImageDiv #Image .ImageBtn.BtnRight { right: 10px; }
article section#ImageDiv #Image .ImageBtn span.material-symbols-outlined { font-size: 4rem; }

article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 15px; font-size: 2.5rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 40px; }

}


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

:root {
	--DfSectionPadding: 30px 0px;
}

article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 10px; font-size: 2rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 30px; }

article section.KeyWord h2.TW { padding: 0px calc( 5% - 5px ); }
article section.KeyWord h2.EN { padding: 0px calc( 5% - 5px ); }
article section.KeyWord p { width: 90%; }

article section.News .NewsContents .NewsGrid a.NewsCard .ImageMain { height: 190px; }
article section.News .NewsContents .NewsGrid a.NewsCard .Date { top: -10px; left: -10px; }

article section.Education .EducationContent .EducationSubContent .EducationText { padding-left: 60px; }

article section.Feature .FeatureContents .FeatureGrid a.FeatureCard h3 { font-size: 1.7rem; }

article section.Gallery .GalleryContents .GalleryGrid .GalleryItem { height: 150px; }

}


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

article section#ImageDiv #Image .ImageBtn { top: calc( 50% - 20px ); width: 40px; height: 40px; }
article section#ImageDiv #Image .ImageBtn.BtnLeft { left: 10px; }
article section#ImageDiv #Image .ImageBtn.BtnRight { right: 10px; }
article section#ImageDiv #Image .ImageBtn span.material-symbols-outlined { font-size: 3rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain { bottom: 0px; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 10px; font-size: 2rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 30px; }

article section#ImageDiv #Image #MarqueePointer.Open { display: none; }

article section.News .NewsContents .NewsGrid { grid-template-columns: repeat(1, 1fr); }
article section.News .NewsContents .NewsGrid a.NewsCard { margin-bottom: 50px; }
article section.News .NewsContents .NewsGrid a.NewsCard:last-child { margin-bottom: 0px; }
article section.News .NewsContents .NewsGrid a.NewsCard .ImageMain { height: 62vw; }

article section.Education .EducationContent .EducationSubContent { display: block; padding: 0px 0px 30px; }
article section.Education .EducationContent .EducationSubContent .EducationImage { margin: 0 auto 30px; width: calc(100% - 30px); height: 66vw; }
article section.Education .EducationContent .EducationSubContent .EducationImage .EducationSubImage { display: none; }
article section.Education .EducationContent .EducationSubContent .EducationText { padding: 0px var(--LRMargin); }

article section.Feature .FeatureContents .FeatureGrid { grid-template-columns: repeat(1, 1fr); }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard { margin-bottom: 30px; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard:last-child { margin-bottom: 0px; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard .FeatureCardIcon { width: auto; height: 60px; }
article section.Feature .FeatureContents .FeatureGrid a.FeatureCard .FeatureCardIcon img { width: auto; height: 100%; }

article section.Gallery .GalleryContents .GalleryGrid { grid-template-columns: repeat(2, 1fr); }
article section.Gallery .GalleryContents .GalleryGrid .GalleryItem { height: 25vw; }

}


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

article section#ImageDiv #Image { height: 67vw; }
article section#ImageDiv #Image .ImageMain .Item {  background-size: auto 100%; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text { padding: 10px; font-size: 1.6rem; }
article section#ImageDiv #Image .ImageMain .Item .TextMain .Text span { line-height: 25px; }

article section.KeyWord h2.EN .Contents { font-size: 2rem; }

}