@charset "UTF-8";
@import './webfont.css';

 /* @font-face { font-family:'教'; src:local('標楷體'); unicode-range: U+3400-F000; } */
@font-face { font-family:'教'; src:url('dict-symbols.woff'); }
@font-face { font-family:'教'; src:local('Times New Roman'); unicode-range: U+0020-0200; }
 /* unicode-range: U+5F5D,U+5F5E,U+F6063,U+F6095,U+F6196,U+F6197; */

/* @font-face { font-family:'標楷體2'; src:local('標楷體'); unicode-range: U+3400-2A000; } */

:root 
{
	--colorR:#D83B4D;
	--colorRd:#900;
	--colorRl:#ffdfdf;
	--colorRl2:#ffd7d7;
	
	--colorGa:#89683A;
}

 blue { color:blue; }
 red { color:var(--colorRd); }

.fme13 { max-width:1300px; margin:auto; }

 big15	{ font-size:1.5em; }
 big2 { font-size:2em; }


 * { box-sizing:border-box; font-family:'教', 標楷體; }
 body { margin:0px; }
 form { display:inline; }
 table { border-collapse:collapse; }
 img { max-width:100%; vertical-align:middle; }
 hr { margin:1em 0; border:0; border-top:1px solid #999; }
 button { cursor:pointer; }

 input::placeholder { text-indent:0.5em; color:#ccc; }

 ::-webkit-scrollbar { width:0.5em; }
 ::-webkit-scrollbar-thumb { border-radius:0.25em; background:var(--colorR); box-shadow:2px 2px 3px 0px #0008; }
 ::-webkit-scrollbar-track { background:#fff8; }

 dialog::backdrop { background:#0008; }
 dialog img { max-width:100%; }


.btn1 { display:inline-block; min-width:7.5em; margin:0.5em; padding:0 1.5em; border:0; background:var(--colorR); border-radius:0.2em; text-align:center; line-height:2.5em; color:#fff; }
.btn1:hover, .btn1:focus { background:var(--colorRd); }

/* 注音 */

 phon { border: 0px dashed #ccc; border-radius: 0.3em; padding-top: 0.5em; 
 white-space:nowrap;

	 &>sup { position:relative; display: inline-block; left:-0.6em; top:-0.6em;
	 margin:0.5em -0.5em 0 0; font-size:0.7em; text-indent:0; }
	 &>sub{ position:relative; font-size:0.7em; left:-0.4em; color:var(--colorR); }
	 &+div { display:inline-block; }
 }

/* a */
 a	{ text-decoration:none; color:#333; }

 h6, .hide, [hide]
 { position:absolute; right:1000vw; }
[hide]:focus, .hide:focus { z-index:999; left:5px; top:5px; color:#fff; background-color:#000;  }


/* form */
form
{
	flex { align-items:center; column-gap:0.5em; }
	input { max-width:95vw; height:2.5em; margin:0.5em 0; border-radius:0.2em; vertical-align:middle; font-size:1.25em; }
	select, input[type=text], input[type=number], input:not([type])
	{ border:1px solid #888;
		&:hover, &:focus { background:#ffc; }
	}
	input[type=number] { text-align:right; }

	input[type=submit], input[type=reset]
	{ min-width:7.5em; border:0; padding:0 1.5em; text-align:center; line-height:2.5em; color:#fff; cursor:pointer;
		&:hover, &:focus { background:var(--colorRd); c olor:#000; }
	}
	input[type=text]+input[type=reset], input[type=number]+input[type=reset]	{ flex-grow:0; min-width:0; width:1em; height:1em; margin:0 0.5em 0 -2em; padding:0; border:0; border-radius:50%; background:#8888; line-height:1; 
		&:hover, &:focus { background:#000; }
	}
	#s1 { padding-right:2em; }
	
	label>span:first-child { padding-right:0.25em; font-size:1.5em; }

	input[type=submit]	{ background:var(--colorR); }
	input[type=reset]	{ background:#0008; }
}

form.quick 
{ display:inline-block; width:350px; max-width:60%; margin:1em; vertical-align:top; text-align:center;
	input { height:1.5em; }
	input[type=image] { margin-left:-1.5em; padding:0.25em; }
}

.dat 
{ border:1px solid #ccc;
	thead { position:sticky; top:-1px; }
	th { white-space:nowrap; background:#ccc; }
	td { border:1px solid #ccc; }
	img { border:1px solid #f00; }
}


 body.home { background:#f5e0db url(img/bgH2.jpg) repeat-x; }
 body.home main
{
	max-width:1300px; min-height:804px; background:url(img/bgH.jpg) no-repeat;
	a { display:inline-block; }
	right
	{	a { background:#fff; border-radius:0.8em; margin:0.3em; padding:0.3em 1em; color:#B96A48; }
		a:hover, a:focus { background:#000; color:#fff; }
	}
	&>div { height:660px; }
	nav
	{
		ul { padding:0; }
		li { display:inline-block; list-style-image:url(img/iconR.png); }
		a { margin:0.3em 0.3em; font:bold 1.8em/1 "教"; color:var(--colorGa); text-shadow:3px 2px 1px #fff; }
		a::before { content:url(img/iconR.png); margin-right:0.25em; }
		a:hover, a:focus { text-decoration:underline; text-shadow:0.1em 0.1em 0.2em #ff0c; }
	}
	
	.cnt { width:90%; margin:7em 0 -10em; text-align:right; }
	h1.t1 { display:none; }
	h1.t2 {  }
	h1 img { position:relative; }

	aside 
	{	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; font-size:1.25em; line-height:2; 
		&>* { flex-grow:1; padding:0.5em; }
		&>div:last-child { text-align:right; }
		a { margin-left:1em; text-decoration:underline; }
		a:hover, a:focus { background:#ff0; }
	
	}

	.noti
	{ width:60%; margin:1em 0.5em; padding:1em; border-radius:0.4em; background:#f5e8e2; text-align:left; font-size:1.25em; }
	.noti h2 { margin:-1em -1em 1em; padding:0.5em; border-radius:0.4em 0.4em 0 0; background:#f6e1dc; font-size:1em; color:#c0552b; }
}




body.page
{	background:#f5e0db url(img/bg3.jpg);
	.bg { position:absolute; z-index:-1; top:0; width:1300px; max-width:100%; height:630px; background:url(img/bg.png) no-repeat 100% 0; }
	&>* { }
	h1 { display:inline-block; width:1000px; max-width:100%; margin:0; padding:0.5em 0; text-align:center; }
	h1 img { max-width:80%; }

	flex { position:relative; }
	flex>header
	{	
		nav { position:relative; display:inline-block; width:15em; padding:0 1em 1em; }
		nav h6 { position:absolute; display:inline-block; opacity:0.75; margin:0; padding: 0.5em; border-radius:0 1em 1em 0; background:var(--colorRl); writing-mode:tb-rl; vertical-align:top; line-height:1; color:#816236; }
		nav h6 d { display:inline-block; width:1em; height:1em; border-radius:0.5em; background:#816236; writing-mode:lr-tb; text-align:center; color:var(--colorRl); }
		ul { margin:0; }
		li { list-style-image:url(img/iconR.png); font:bold 1.6em/1.2 '教'; margin:0.5em 0; }
		li:last-child { list-style-image:url(img/iconB.png); }
		a { display:block; white -space:nowrap; color:var(--colorGa); }
		a[aria-selected] { color:#000; }
		a:hover, a:focus { text-shadow:0.1em 0.1em 0.2em #f00c; }
	}
	main { w idth:100%; max-width:51em; }
	main>section, main>nav { padding-left:4em; }
	h2 { width:50%; height:52px; margin:0.5em -40px; padding-left:40px; background:url(img/h2.png) no-repeat; font-size:2em; line-height:52px; color:var(--colorGa); white-space:nowrap; }

	section>h3, nav>h3 { font-size:1.5em; font-weight:normal; }
}

.keyBar
{	margin:0.5em 0;

	button { margin:0.2em; padding:0.4em; border:1px solid var(--colorGa); border-radius:0.2em; background:#fff; color:var(--colorGa); font-size:1em; }
	button::before { content:url(img/keyboardG.png); margin-right:0.5em; vertical-align:middle; }

	button[aria-selected="true"] { background:var(--colorGa); color:#fff; }
	button[aria-selected="true"]::before { content:url(img/keyboardW.png); }
	
}

.keyboard
{
	table { border-collapse:separate; border-spacing:0.5em; font-size:1.5em; }
	td { width:2em; height:2em; border:1px solid #ccc; border-radius:0.3em; padding:0; background:#ebebeb; }
	input { width:2em; height:2em; border:1px solid #ccc; border-radius:0.3em; margin:-2px; font-size:1em; line-height:2;
	border-color:#8b5401; background:#ffe9c8; color:#8b5401; cursor:pointer; }
	input:hover { background:#8b5401; color:#fff !important; }
	
	.p
	{
		tr:first-child>td:nth-child(6) input, tr>td:nth-child(n+7) input
		{ border-color:#205e3f; background:#d2f0e1; color:#205e3f; 
			&:hover { background:#205e3f; }
		}
		tr:nth-child(n+2)>td:nth-child(7) input
		{ border-color:var(--colorRd); background:#ffe1e1; color:var(--colorRd); 
			&:hover { background:var(--colorRd); }
		}
		tr:nth-child(5)>td input 
		{ border-color:#105181; background:#CBE4F8; color:#105181; 
			&:hover { background:#105181; }
		}
	}
	.e
	{ margin:0 1.25em 2em;
		tr:first-child>td { width:0.75em; height:0; border:0; }
		td[colspan='1'] { width:0.75em; }
		td[colspan='1'] { width:0.75em; }
		td[colspan='2'] { width:2em; }
		td[colspan='3'] { width:3.25em; }

		tr:nth-child(2) input { border-color:#205e3f; background:#d2f0e1; color:#205e3f; 
			&:hover { background:#205e3f; }
		}
		tr:nth-child(3) input { border-color:var(--colorRd); background:#ffe1e1; color:var(--colorRd); 
			&:hover { background:var(--colorRd);; }
		}
		tr:nth-child(4) input { border-color:#105181; background:#CBE4F8; color:#105181; 
			&:hover { background:#105181; }
		}
	}

	tr:nth-child(n)>td:nth-child(n)>input:hover, input:focus
	{ position:relative; top:-0.1em; left:-0.1em;
	/* border-color:#000; background:#eee; color:#000; */
	box-shadow:0.1em 0.1em 0.2em #0006; }
}


.idx
{ max-width:730px; padding:0;
	h3 { margin:1.25em 0; font-size:1.5em; line-height:1; }
	ol { max-width:44em; margin:0; padding:0; }
	li { display:inline-block; margin:0.2em; }
	a { display:inline-block; }
	a:hover, a:focus { box-shadow:0.2em 0.2em 0.3em #0008; }
	
	.stk 
	{
		a { width:1.6em; height:1.6em; border-radius:0.8em; text-align:center; font:1.2em/1.6 ''; background:var(--colorRl); color:#000; }
		a:hover, a:focus { background:#f99; color:#fff; }
	}
}

.idxR
{	max-width:45em; margin:3em 0; padding:2em; background:#f9f2ec;
	ul { margin:-2em 0 0; padding:0; }
	h3 { display:inline-block; position:relative; top:-2em; left:-0.5em; min-width:6em;
		margin:0; padding:0.2em; padding-left:1em; border-left:0.75em solid #888; }
	h3[s1] { border-color:#f99; background:var(--colorRl); }
	h3[s2] { border-color:#fc0; background:#ffc; }
	h3[s3] { border-color:#6c0; background:#dfffbf; }
	h3[s4] { border-color:#6cb6ef; background:#d2e8f9; }
	h3[s5] { border-color:#c6c; background:#f4e1f4; }
	li { display:inline-block; margin:0.1em; font-size:2em; }
	a { position:relative; display:inline-block; border:1px solid #999; padding:0.3em; background:#fff; line-height:1; }
	a:hover, a:focus { background:#ddd; text-shadow:2px 2px 1px #fff; box-shadow:0.1em 0.1em 0.2em #0008; }
	a[data-n]: :after { content:attr(data-n); position:absolute; top:1px; right:1px; font:0.25em/1 mono; color:#88f; }
}

form.f2
{ display:inline-block; padding-left:4.5em;
	fieldset
	{	border:0; margin:1em 0; padding:0; font-size:1.5em;
		&.btn 
		{
			input { margin-left:0.5em; }
			input+label 
			{ position:relative; z-index:1; display:inline-block; min-width:8em;
			margin:0 0.5em 0 -1.5em; padding:0 1em; border:1px solid #8b5401; border-radius:0.2em; 
			background:#ffe9c8; line-height:2; text-align:center; color:#8b5401; }
			label:hover, input:focus+label, input:checked+label { background:#8b5401; color:#fff; }
		}
		&>label { }
		label:hover>input, label>input:focus { background:#888; }
		input { width:0.7em; height:1em; accent-color:var(--colorGa); }
	}
	&>label { font-size:1.5em; }
	&>label, legend
	{	position: relative; left: -2.5em; margin:0; padding:0; line-height:2;
		b { display:inline-block; width:1.5em; height:1.5em; margin-right:0.5em; border-radius:0.9em; background:var(--colorRl); line-height:1.5; text-align:center; color:var(--colorRd); font-size:0.75em; }
	}
	input[type=text] { width:100%; }
	flex
	{	column-gap:0.5em; margin:1em 0; 
		input { margin:0.3em 0; }
	}
}

.usedL { padding:1em 0; }
.usedL a
{	display:inline-block; width:1.5em; margin:0 0.2em 0.2em 0; border:2px solid var(--colorRl2); border-radius:0.1em; text-align:center; background:#fff; font:3em/1.5 '教'; color:#03c;
	&.err { background:var(--colorRl2); }
	&:hover, &:focus { color:var(--colorRd); box-shadow:0.1em 0.1em 0.2em #0008; }
}


.list
{ list-style:none; padding:1em; border-radius:0 0 1.25em 1.25em; box-shadow:0.2em 0.2em 0.2em #0006; background:#f7f7e6;

	div { height:2em; overflow:hidden; text-align:center; }
	div>img { margin:0.5em; }
	li { position:relative; padding-left:1em; border-bottom:1px solid #f7beae; line-height:2.5; font-size:1.5em; }
	li:hover::before, li:focus-within::before { content:'✓'; position:absolute; left:0; }
	a { display:block; }
}

.list2
{ border-radius:2em; padding:1em; background:var(--colorRl);

	h3 { margin:0; }
	.inf { margin:0.5em 0; }
	ol { margin:0; padding:0; }
	li { display:inline-block; }
	a { position:relative; display:block; margin:2px; padding:0 0.375em; background:#fff; font:3em/1.5 '教'; }
	a[data-rad]::before { content:attr(data-rad); position:absolute; top:1px; left:1px; font:0.2em/1 ''; color:#88f; }
	a[data-stk]::after { content:attr(data-stk); position:absolute; top:1px; right:1px; font-size:0.2em; color:#88f; }
	a:hover, a:focus { background:#ccc; }
}

.list3
{
	li::marker { vertical-align:top; }
	li { margin:1em 0; border-top:2px solid #888; }
}

.pager
{ margin:1em; text-align:center;
	a, .act { display:inline-block; min-width:1.8em; margin:0.5em; border-radius:0.9em; background:#fff; text-align:center; font:1em/1.8 ''; color:var(--colorRd); }
	.act { padding:0 0.4em; background:var(--colorRd); color:#fff; }
}


.viewBox
{
	flex button
	{ border:0; border-radius:1rem 1rem 0 0; background:#fee; text-align:center; font:1.75em/2 '教'; color:#999; 
		&[aria-selected='true'] { background:var(--colorRl2); color:#a00; }
		&:hover, &:focus { background:var(--colorR); color:#000; }
	}

	&>div { padding:0.5em; background:var(--colorRl2); }
	div>svg { display:none; margin:auto; border:1px solid #000; border-radius:1em; }
	[data-md='0']+div>#svg { display:block; }
	[data-md='1']+div>#svg1 { display:block; }
	[data-md='0']~menu>.md1 { display:none; }
	[data-md='1']~menu>.md0 { display:none; }

	menu
	{ margin:0; padding:0.5em; background:var(--colorRl2); text-align:center; line-height:3;

		button { width:2em; height:2em; margin:0.3em; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:1px 1px 2px #000; background:url(img/sp.gif) center/75% no-repeat; vertical-align:middle; font:1em/1 ''; color:#0000; overflow:hidden; }
		
		button:hover, button:focus { box-shadow:0.2em 0.2em 0.2em 0.2em #0008; }

		[data-volume] { background-color:#647b83; background-image:url(img/volumeB.svg); }
		[data-volume='0'] { background-image:url(img/muteB.svg); }

		[data-play] { background-color:#598d80; background-image:url(img/play.svg); }
		[data-play='1'] { background-image:url(img/pause.svg); }

		#nextB { background-color:#5f5647; background-image:url(img/next.svg); }
		.reloadB { background-color:#829e53; background-image:url(img/reload.svg); }

		[data-grid] { background:#c25457 url(img/grid.png) center no-repeat; }
		[data-grid='1'] {  }

		[data-full] { background-color:#647b83; background-image:url(img/full.svg); }
		[data-full='1'] { background-image:url(img/win.svg); }

		#shareB { background-color:#598d80; background-image:url(img/share.svg); }
		
		#hint1 { background-color:#647b83; background-image:url(img/hint.svg); }
		#hintA { background-color:#598d80; background-image:url(img/auto.svg); }
		
		.speed { height:2em; margin:0.3em; padding:0 0.5em; border:2px solid #fff; border-radius:1em; box-shadow:1px 1px 2px #000; vertical-align:middle; line-height:1; color:#0000; background:#f4c197; 
			a { display:inline-block; margin:0.2em 0; font:1.25em/1.2 ''; }
			a.act { color:#fff; }
			a:hover { color:red; }
		}
	}
	cen { padding:0.5em; border-radius:0 0 1rem 1rem; background:var(--colorRl2); #f7c5c2; line-height:3; }
	cen a.act { color:var(--colorR); }
}



.wordMenu
{ max-width:9em; font-size:1.5em;
	a { display:flex; align-items:center; border-radius:5px; margin:0.75em 0.5em; padding:0.25em; line-height:1; }
	&>a { }
	a>img { height:1.5em; margin-right:0.25em; }
	flex { column-gap:0.5em; padding:0 0.5em; }
	flex>a { margin:0; }

	a[c1] { border:5px solid #ff896b; background:var(--colorRl2); color:#c60; }
	a[c2] { border:5px solid #b57b65; background:#f0e3df; color:#7b4e00; }
	a[c3] { border:5px solid #e1b500; background:#fff3cf; color:#c90; }
	a[c4] { border:5px solid #68b77c; background:#ebffef; color:#007517; }
	a[c5] { border:5px solid #6b8fc2; background:#e5f1ff; color:#00469b; }
	a[c6] { border:5px solid #d68cb9; background:#ffe5f5; color:#8a0056; }
	a[c7] { border:5px solid #666; background:#e4e4e4; color:#333; }
	
	a:hover, a:focus { border-color:#000; background:#ccc; color:#000; }
}
.la1 .wordMenu a { font-size:0.75em; }


main section.mean
{
	 h3 { font-size:2em; }
	dl>* { padding:0.5em; }
	dt { border:1px solid #ffbfbf; background:#fef0ef; font-size:1.5em; color:#be5561; }
	dd { margin:0; padding-left:1.5em; border:1px solid #ffbfbf; background:#fff; font-size:1.375em; }
	dd b { border-radius:0.2em; background:red; color:#fff; font-family:none; }
	
	.l2 { counter-reset:ol; }
	.l2 li { margin-left:-0.5em; counter-increment:ol; }
	.l2 li::marker { content:'(' counter(ol) ')'; }

	figure { margin:auto; text-align:center;  }
	figure img{ max-width:100%; }
	figure figcaption{}
	
}

.news { width:700px; max-width:90vw; }
ul.news
{ list-style-type:none; padding:0;
	li { border-bottom:1px solid #f7beae; }
	a { display:block; padding:0.5em 0; font-size:1.5em; }
	a:hover, a:focus { background:#ff8; }
	time { display:block; color:#090; font-size:0.8em; line-height:2; }
}

article.news
{ padding-bottom:1em; border-bottom:1px solid #f7beae; font-size:1.5em;
	time { display:block; color:#090; font-size:0.8em; line-height:2; }
	h1 { margin-bottom:0.5em; padding-top:0; border-bottom:1px solid #f7beae; font-size:1.5em; text-align:left; }
}






 body>footer 
{	max-width:1300px; min-height:200px; margin-top:-80px; padding:110px 0 2em; background:url(img/bgF.png) no-repeat; font-size:1.25em; line-height:2; text-align:center;
	flex { max-width:1200px; flex-wrap:wrap; justify-content:center; column-gap:4em; }
	a>img { }
}





@media screen and (max-width: 800px)
{
	body.home main
	{
		h1.t1 { display:block; margin:1em 0; }
		h1.t2 { display:none; }
		h1 img { left:0; margin:0; }
		nav li { background:#fff8; }
		.noti { width:100%; }
	}
	.bg { opacity:0.5; }

	flex[mwrap] { flex-wrap:wrap; }

	body.page main>section { padding:0 0.5em; }
	flex>header { position:absolute; z-index:2; top:0em; left:-15em; transition: left 0.5s; }
	flex>header:hover, flex>header:focus-within { left:0; transition: left 0.5s; }
	body.page>flex>header>nav { position:fixed; top:0; border-bottom-right-radius:2em; background: #fff; }
	flex>header>nav h6 { right:-2em; }

	.idxR { padding:1em; }

	.keyA { display:none; }
}

@media print
{
	
}