@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');
#cssmenu picture {display: none;}
.logo {background: none;height: auto;}
#Header {border-bottom: none;}
body{color: #3a3a3a;}
a {transition: .5;color: inherit;}
a:hover{transform:scale(1.05);}
:root {
	--acct-red: #a9322a;
	--grass: #5e8544;
	--gold: #cba64b;
	--font1:'Noto Serif TC', serif;
	--shadow1:rgba(92, 92, 92, 0.6) 0px 20px 20px -25px;
}
h1 {font-size: 3rem;font-family: var(--font1);}
h2 {font-size: 2.5rem;font-family: var(--font1);}
.bgcolor{background: linear-gradient(to bottom,burlywood 0%,white 40%);}
#event_master h1 {font-size: 6rem;text-align: center;}
#event_master h2 {font-size: 3.2rem;}
#event_third, #event_fourth, #event_fifth, #event_sixth {padding: 1.6rem 1rem;}
.platform{background: linear-gradient(to right,#343434 40%,var(--acct-red) 70%,#343434 90%);}
.platform a,.footer-wrap a{transition: .5s;}
.platform a:hover,.footer-wrap a:hover{color: white;}
.target-fix {position: relative;top: -2rem;display: block;visibility: hidden;}
.footer-wrap{background: linear-gradient(to right,#343434 40%,var(--acct-red) 70%,#343434 90%);}

/* 大考測評讀書會 */
.study-circle img {display: inline-flex;width: 80px;margin-right: 0.5rem;vertical-align: sub;}
.study-circle>span span {border-bottom: 4px solid var(--gold);margin: auto 0.5rem;color: var(--acct-red);}
.periodicals {padding: 3rem 0 1rem;align-items: flex-start;border-bottom: dashed 1px var(--gold);}
.periodicals figure {width: 25%;margin: 1rem auto;position: relative;}
.periodicals figure img {width: 100%;}
.periodicals figure::after {content: '';position: absolute;width: 35px;height: 95%;background-color: #dadada;right: -15px;bottom: 0;transform: rotate(5deg);filter: blur(1px);z-index: -1;}
.after-reading {width: 75%;padding: 1rem 0 1rem 5rem;}

/* 閱後評量 */
.read-title {font-size: 3rem;font-family: var(--font1);}
.read-title i, .mooc i {font-size: 4rem;margin-right: 1rem;color: var(--grass);}
.unit {font-size: 2.5rem;margin-bottom: 2rem;font-family: var(--font1);color: var(--grass);}
.exam_item dt,.exam-pair dt {font-size: 1.5rem;color: var(--acct-red);}
.exam_item dt span {display: block;text-align: right;font-size: .8em;}
.exam_item dd {font-size: 1.25rem;text-indent: -2rem;margin-left: 2rem;}
.exam_item table {font-size: 1.25rem;border-collapse: collapse;width: 80%;margin: auto auto auto 0;text-align: center;}
.exam_item table th, .exam_item table td {border: 1px solid #ddd4a7;padding: 0.25rem;}
.exam_item table th {background: linear-gradient(90deg,#dcb359,#e9d7b1);}
.exam-pair {display: flex;flex-wrap: wrap;}
.exam-pair dt {width: 100%;}
.exam-pair dd {width: calc(100%/2 - 2rem);font-size: 1.25rem;}
.online-test {text-align: center;margin-top: 2rem;}
.online-test a {font-size: 2rem;font-weight: bold;text-decoration: none;padding-bottom: 0.25rem;background:linear-gradient(to right, var(--gold) 20%,#b88c42 50%,var(--gold) 70%);color: white;padding: 0 2.5rem;transition: .5s;display: inline-block;}
.online-test a:hover {letter-spacing: 0.1rem;transform: initial;}
.exam_bg {background: linear-gradient(to top,#f3eee4 0%, #ffffff 100%);}
.exam_bg .exam_item {padding: 2rem 1rem;}
.join {font-size: 1.5rem;text-align: center;padding: 2rem 0;}
.free-attend {font-style: italic;color: var(--acct-red);font-weight: bold;font-size: 1.75rem;}
.join a {background-color: var(--acct-red);color: white;border-radius: 0.5rem;box-shadow: 0 0.5rem 1.125rem -0.5rem rgb(169 50 42 / 90%);display: block;text-decoration: none;width: fit-content;margin: 1rem auto auto;padding: 0.25rem 2.5rem 0.25rem 3rem;font-size: 1.75rem;}
.join i {margin-left: 0.5rem;animation: myfirst 1s infinite alternate ease-in-out;}
@keyframes myfirst {
	from {opacity: 1;}
	15% {opacity: 0;}
	25% {opacity: 1;}
	100% {opacity: 1;}
}

/* 私慕課／讀書會 */
.mooc-info {position: fixed;top: 25%;right: 0;}
.mooc-info a {background-color: var(--grass);color: white;width: 2rem;padding: 1rem 1.5rem 2rem;display: flex;justify-content: center;border-radius: 1rem;clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);text-decoration: none;line-height: 1.25rem;}
.lecture {font-size: 1.5rem;color: var(--acct-red);}
.lector {align-items: center;font-size: 1.5rem;padding: 1rem 0;}
.lector figure {width: 210px;height: 205px;border-radius: 50%;border-right: 4px solid var(--gold);border-bottom: 5px solid var(--gold);overflow: hidden;box-shadow: var(--shadow1);}
.lector img {width: 100%;}
.lector dl {margin-left: 2rem;}
.lector dt {border-left: 5px solid;padding-left: 1rem;font-weight: bold;color: var(--grass);}
.lector dd {padding-left: 1.25rem;}
.unique .showing {width: auto;}
.showing {width: calc(100%/2 - 4rem);margin: 2rem;font-size: 1.5rem;border-left: 4px solid var(--gold);border-right: 4px solid var(--gold);border-radius: 2rem;padding: 3rem;background-color: #f6f2e7;box-shadow: var(--shadow1);}
.showing dt {font-weight: bold;color: var(--grass);border-left: initial;}
.showing a {color: black;}
.showing a:hover{letter-spacing: 0.1rem;color: var(--acct-red);}

@media screen and (min-width: 1201px){	
	#cssmenu ul {display: none !important;}
	#event_master, #event_third, #event_fourth, #event_fifth, #event_sixth, .exam_bg .exam_item {width: 1200px;margin: auto;}
	.text-indent--6 {text-indent: -1.5rem;}
}

@media screen and (max-width: 1200px){
	#event_master h1 {font-size: 5rem;}
	.periodicals {padding: 2rem 1rem 0;}
	.showing {width: calc(100%/2 - 2rem);margin: 1rem;padding: 1rem;}
	.mooc-info {top: auto;bottom: 15%;}	
	.study-circle>span{display: block;margin: auto;}
}

@media screen and (min-width:768px) and (max-width:1199px){
	.periodicals figure {width: 30%}
	.after-reading {width: 90%;}
}

@media screen and (max-width:767px){ 
	h1 {text-align: center;}	
	.study-circle>span span {margin: auto 0.25rem;}
	#event_master h1 {font-size: 4rem;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;line-height: 1.3;}
	.study-circle img{margin-right: initial;}
	.read-title{text-align: center;}
	.read-title i, .mooc i{display: block;margin: auto;text-align: center;}
	.online-test a{font-size: 1.6rem;word-break: keep-all;}
	.after-reading {width: 100%;padding: 1rem;}
	.periodicals figure {width: 50%;}
	.exam_item table {width: 100%;margin: auto;}
	.unit {font-size: 2rem;}
	.lecture {font-size: 1.5rem;}
	.lector figure {margin: auto;}
	.lector dl {margin: 0.5rem auto auto;font-size: 1.35rem;}
	.showing {width: 100%;margin: 1rem auto;padding: 1rem;}
	.showing dd {font-size: 1.125rem;}
}
@media screen and (max-width: 375px){ 
	.join {font-size: 1.25rem;}
}