@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300&display=swap');
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.logo{transition:.3s; align-content: center;}
.nav ul li a{color:#000; font-size:1em; padding:0.4em; line-height: 160%;}
.nav ul li a:hover,.nav ul li a:focus{color:#ae282d;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{transition:.3s; background:#fff; border-bottom:5px solid #ae282d; padding-top:15px;}
#header .page{padding:0; display:flex; position:relative; width:100%; align-items: flex-end;}
#header.show{padding-top:2px;}
.logo.show{padding-top:2px; padding-bottom:2px; padding-right:10px;}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}/*topblue*/
/*topblue*/
.topblue{position:absolute; top:-15px; right:0; text-align: right; font-size:.8em; color:#666; padding:.3em; background: #efefef;display: flex; align-items: center; justify-content: flex-end;}
.topblue.show{margin-top:0;}
.topblue a{color: #666;}
.topblue a:hover,.topblue a:focus{color: #ae282d;}
#header .gsc-control-cse{padding:0; font-size:1em;}
/*defaultimg*/
#defaultimg.banner{display:block; background:url(images/banner.jpg) no-repeat top center; background-size:cover;}
.banner .page{ position:relative;}
.bannertit{line-height: 100%; font-size:300%; color:#fff; margin:5% 0; padding:0; text-align: right; text-shadow: 0 0 10px rgba(0,0,0,1);  letter-spacing: 3px; font-weight:bold;}
.bannertit span{font-size:40%; font-weight:normal; letter-spacing: 5px;}
/*list*/
.list{padding:1em;}
.list .innerhtml{padding:0;}
.list h3.subject{font-weight:normal; margin:0;}
.list a{width:100%; diaplay:block; float:left; color:#666; background:linear-gradient(45deg,#f5f5f5 30%,#e6e5db 50%,#f5f5f5 60%); box-shadow: 0 0 10px rgba(0,0,0,0.2); padding:10px;}
.list a:hover,.list a:focus{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background:linear-gradient(45deg,#f5f5f5 0%,#e6e5db 10%,#f5f5f5 20%);}
.list figure img{transition:.3s;}
.list a:hover img,.list a:focus img{transform:scale(1.05, 1.05);}
.list a:hover div,.list a:focus div{color:#333;}
.list a:hover p.more,.list a:focus p.more{color:#f00;}
.list a:hover figcaption,.list a:focus figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figcaption{position:absolute; top:0; left:0; width:100%; height:100%; text-align: center; color:#fff; background:rgba(1,66,131,0.6); z-index: 100; font-size:.9em; padding-top:30%; opacity:0; transition:.3s;}
.list div{padding:0.3em; min-height: 3em; font-size:.9em; color:#666; line-height: 160%;}
.list div p.more{text-align:right; margin:0; color:#666; font-size:.7em;}
.list figcaption span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.sr-only-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: #000;
    color: #fff;
    z-index: 9999;
}

.sr-only-focusable:focus {
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    overflow: visible;
    padding: 10px;
    top: 0;
    left: 0;
}

/*default use*/
.dnews{padding:3em 0;}
.dnews .tit, .dactivity .tit, .content h4.tit{text-align:center; font-size:220%; color:#939090; font-weight:normal; letter-spacing:.3em; position:relative; display:inline-block;}
/*.dnews h4.tit::before,.dactivity h4.tit::before, .content h4.tit::before{content:""; display:inline-block; position:absolute; width:3.5em; height:1.2em; border:1px solid #939090; left:50%; top:0; transform:translateX(-63%); border-top:none; border-bottom:none;}
.dnews h4.tit::after,.dactivity h4.tit::after, .content h4.tit::after{content:""; display:inline-block; position:absolute; width:1px; height:1.2em; background:#939090; left:42%; top:0;}*/
.dnews .tit span, .dactivity .tit span, .content h4.tit span{font-size:45%; letter-spacing: 0.8em;}
.dnews h2.tit{margin-top:0;}
.dnews h2.tit span{display:block;}
.dnews ul{margin:0; padding:0; list-style: none; position:relative;}
.dnews ul li{display:block; position:absolute; top:0; left:0; width:100%;}
.dnews ul li > a{display:flex; align-items: center; justify-content: center; width:20%; border:1px solid #fff; background:linear-gradient(#ae282d 92%,#ae282d 92%); color:#fff; text-align:center; padding:0 0.5em; font-size:100%; position:absolute; top:-4em; height:4em;}
.dnews ul li:nth-of-type(2) > a{left:20%;}
.dnews ul li:nth-of-type(3) > a{left:40%;}
.dnews ul li:nth-of-type(4) > a{left:60%;}
.dnews ul li:nth-of-type(5) > a{left:80%;}
.dnews ul li > a::before{content:""; width:15px; height:15px; display:block; background:linear-gradient(135deg,#ae282d 50%,rgba(0,0,0,0) 50%); left:0; top:0; position:absolute;}
.dnews ul li > a:hover,.dnews ul li a:focus{background:linear-gradient(#d6d6d6 92%,#ae282d 92%); color:#000;}
.dnewsfrm{display:block; min-height: 34vh; margin-top:3.5em;}
.dnews .list{border-bottom:1px solid #ccc;}

.dnews .list a{padding:0; background:none; box-shadow: none;}
.dnews .list a:hover,.dnews .list a:focus{box-shadow:none; background:#efefef;}
.dnews .list h3.subject{font-size:130%; color:#000; margin-bottom:0.5em;}
.dnews .list .type{display:inline-block; padding:0 1em; font-size:100%; color:#fff; margin-right:0.5em; border-radius:0.3em;}
.dnews .list .path{font-size:100%;}
.dnews .list .more{padding:0.5em 0 0 0;}
.dnews .list .more span{border-radius:2em; padding:0.5em 1.5em; border:1px solid #ae282d; color:#ae282d; font-size:120%; display:inline-block; transition:.3s;}
.dnews .list .more span:hover,.dnews .list .more span:focus,.dnews .list a:focus .more span{background:#ae282d; color:#fff;}
.d-area2{background:#f4f4f3; padding:5em 0;}
.d-area2 .list{padding: 0;}
.d-area2 .list:nth-of-type(odd){background:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.d-area2 .list.title{background:#ae282d; color:#fff; padding:1em;}

.d-area2 .list.title h4 span{color:#000; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size:80%;}
.d-area2 .list a{background:none; box-shadow:none; padding:0;}
.d-area2 .list h3.subject{font-weight:bold; color:#000; margin-top:30%; font-size:160%; line-height: 140%; margin-bottom:0.7em;}
.d-area2 .list .innerhtml{font-size:120%; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; color:#000;}
.d-area2 .list p.more{text-align:right; padding-right:1em; margin-top:2em;}
.d-area2 .list p.more span{display:inline-block; width:3em; height:1px; background:#9c9da3; position:relative; transition:.3s;}
.d-area2 .list p.more span::before{content:""; width:15px; height:1px; background:#9c9da3; display:inline-block; position:absolute; left:0; top:-4px; transform:rotate(-30deg);}
.d-area2 .list a:hover p.more span,.d-area2 .list a:focus p.more span{width:4em; background:#ae282d;}
.d-area2 .list a:hover p.more span::before,.d-area2 .list a:focus p.more span::before{background:#ae282d;}
.dactivity{padding:3em 0;}
.dactivity .list a{padding:0; background:none; box-shadow:none;}
.dactivity .list h3.subject{font-weight:normal; color:#da1f00; font-size:140%; position:relative; line-height:150%;}
.dactivity .list h3.subject::before{content:""; position:absolute; left:-22%; top:50%; width:21%; height:1px; background:linear-gradient(90deg,#da1f00 40%,#ccc 40%); display:inline-block;}
.dactivity .list .innerhtml{color:#000; font-size:100%; padding:0;}
.dactivity .list .col-10{float:right; padding-top:2em; line-height:200%;}
.dactivity .list p.more{text-align:left; margin-top:1.5em;}
.dactivity .list p.more span{font-size:130%; color:#da1f00; letter-spacing: 1px; font-family: 'Yanone Kaffeesatz', sans-serif;}
/*content*/
.pagepath{background:linear-gradient(90deg,#efefef,#fff); color:#999; padding:0.5em 1em;}
.pagepath a{color:#999;}
.sidetit{font-weight:normal; color:#163f92; background:#efefef; padding:0.5em 0.3em;}
h1.subject{font-size:200%;}
.title{font-size:200%; color:#ae282d; border-left:4px solid #ae282d; padding-left:0.5em;}
/*news*/
.classlist .list{padding:0.5em; }
.classlist .list a{color:#000; background:#efefef; display: block; padding:0; border:1px solid #ccc;}
.classlist .list h3.subject{color:#000; position:relative; font-size:160%; padding:1em 1.5em 1em 0.5em; display:block; line-height: 130%;}
.classlist .list h3.subject::after{content:""; width:15px; height:15px; display:block; position:absolute; right:2em; top:50%; background:linear-gradient(-135deg,#fff 50%,rgba(0,0,0,0) 50%); transform:rotate(45deg) translateX(-50%); transition:.3s; opacity:0;}
.classlist .list h3.subject::before{content:""; width:15px; height:15px; display:block; position:absolute; right:1em; top:50%; background:linear-gradient(-135deg,#fff 50%,rgba(0,0,0,0) 50%); transform:rotate(45deg) translateX(-50%); transition:.3s; opacity:1;}
.classlist .list a:hover,.classlist .list a:focus{background:#ae282d; box-shadow: 0 10px 15px rgba(0,0,0,0.3);}
.classlist .list a:hover h3.subject,.classlist .list a:focus h3.subject{color:#fff;}
.classlist .list a:hover h3.subject::after,.classlist .list a:focus h3.subject::after{right:1em; opacity:1;}
.classlist .list a:hover h3.subject::before,.classlist .list a:focus h3.subject::before{right:0em; opacity:0;}
.block.list{border:none;}
.block.list a{padding:0.5em; border:1px solid #efefef;}
.block.list h3.subject{color:#ae282d;}
/*teacher*/
.catSubject{font-weight:normal; text-align: center; font-size:180%; color:#ae282d;}
.list.teacher a{background:none;}
.list.teacher a:hover,.list.teacher a:focus{background:none;}
.list.teacher a:hover h3.subject,.list.teacher a:focus h3.subject{color:#000;}
.list.teacher h3.subject{margin:0; border-bottom:1px dotted #ccc; padding:0 0 0.5em 0;}
/*gallery*/
.list.gallery a{padding:0; background:#fff;}
.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333;}
.list.gallery a:hover h3.subject,.list.gallery a:focus h3.subject{color:#f00;}
/*download*/
.list.download > div{padding:0.5em;}
.list.download{padding:0;}
.list.download > div div{min-height:auto; padding:0;}
.list.download h3.subject{margin:0; padding:0; min-height: auto;}
.dnews .list.download p.more{padding:0;}
.list.download p.more{display:flex; justify-content: flex-end;}
.list.download .more a{margin:0 1px; border-radius:2px; padding:0 0.4em; background:#ae282d; color:#fff; cursor:pointer; display:inline-block; width:auto;}
/*font-size control*/
.sizectrl{display:flex; justify-content: flex-end; align-items: center; color:#666;}
.sizectrl a{display:flex; border-radius:5px; border:1px solid #ccc; width:30px; height:30px; line-height:15px; justify-content: center; align-items: center; color:#666; margin:2px;}
.sizectrl a:hover,.sizectrl a:focus{background:#333; color:#fff;}
.sizectrl a:nth-of-type(1){font-size:.8em;}
.sizectrl a:nth-of-type(3){font-size:1.3em;}
/* 範例：當按鈕被按下時的視覺樣式 */
.sizectrl a[aria-pressed="true"] {
    background-color: #000;
    color: white;
    font-weight: bold;
}
.font-s{font-size:.8rem !important;}
.font-m{font-size:1rem !important;}
.font-l{font-size:1.3rem !important;}
/*footer*/
#footer{font-size:.7em; color:#fff; background:#514e4e; line-height:200%; padding:3em 0;}
#footer .ll{color:#ccc; font-size:120%; line-height: 200%;}
#footer .ll p{margin:0;}
#footer .name{font-size:100%; line-height: 150%; font-weight:700; margin-bottom:.5em !important;}
#footer .name span{font-size:130%; }
#footer .col-4{padding:1em;}
.copyright{background:#ae282d; text-align: center; color:#fff; padding:1em 0;}
@media screen and (max-width:1286px){/*desktop*/
	
	.page{padding:0 3%;}
	.d-area2 .list h3.subject{margin-top:10%;}
	
}
@media screen and (max-width:1026px){/*desktop*/
	.d-area2 .list h3.subject{margin-top:0;}
	.nav ul li a{padding-left:0.3em; padding-right:0.3em; font-size:.85em;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding-left:0.2em; padding-right:0.2em;}
	.d-area2 .list h3.subject{font-size:100%;}
	.d-area2 .list .innerhtml{font-size:90%;}
	.banner .page{height:20vh; }
}
@media screen and (max-width:767px){/*phone*/
	#header{padding-top:2px;}
	#header .page{justify-content:space-between; align-items: center; flex-wrap: wrap;}
	.logo{padding-bottom:3px;}
	.nav ul li a{color:#ccc; padding:0.5em; font-size:1em;}
	.nav ul li a:hover,.nav ul li a:focus{background:#ae282d; color:#fff;}
	.nav ul li{ border-bottom:1px solid #666;}
	.banner .page{height:30vh;}
	.bannertit{text-align:center; right:0; width:100%;}
	.page{padding:0 3%;}
	.content{padding:1em 0;}
	.dnews ul li{display:block; position:static; width:100%;}
	.dnews ul li > a{display:none;}
	.dnews, .dactivity, .d-area2{padding:1em 0;}
	.dnews .tit, .dactivity .tit{font-size:180%;}
	.dnews .list h3.subject{font-size:100%;}
	.dnews .list p.more span{font-size:100%;}
	.dnews .list .type {font-size:80%;}
	.dnewsfrm{display:block; min-height: 60vh; margin-top:0;}
	.d-area2 .list{height:auto;}
	.d-area2 .list h3.subject{font-size:150%;}
	.d-area2 .list .innerhtml{font-size:110%;}
	.dactivity .list .col-10{padding-top:0.5em;}
	.dactivity .list > a{border:1px solid #ccc;}
	.dactivity .list h3.subject{font-size:130%;}
}