﻿@charset "UTF-8";
/* @import './webfont.css'; */
@font-face { font-family:'部件'; src:url('cns11643webv5.woff'); }
@font-face { font-family:'colorEmoji'; src:url('NotoColorEmoji-Regular.ttf'); }
 /* unicode-range: U+5F5D,U+5F5E,U+F6063,U+F6095,U+F6196,U+F6197; */
/* unicode-range:U+F6000-F6204, U+31C-31E1, U+F8FAA-F8FAD; */
/* @font-face { font-family:'標楷體2'; src:local('標楷體'); unicode-range: U+3400-2A000; } */


:root 
{
	--colorR:#933;
	--colorRd:#622;
	--colorGa1:#82613b;
	--colorGa2:#624e36;

}


 blue { color:blue; }
 red { color:var(--colorR); }


 * { box-sizing: border-box; }
 body { margin:0px; font-family:'微軟正黑體', '正黑體'; background:url('img/bg.jpg'); }
 body>* { max-width:87.5em; margin-left:auto; margin-right:auto; }
 table { border-collapse:collapse; }
 form { display:inline; }
 img { max-width:99vw; vertical-align:middle; }
 h1, h2, h3, h4 { margin:0; padding:0; font-size:1em; font-weight:normal; }

 ::-webkit-scrollbar { width:0.75em; }
 ::-webkit-scrollbar-thumb { border-radius:0.25em; background:var(--colorR); box-shadow:2px 2px 3px 0px #0008; }
 ::-webkit-scrollbar-track { background:#fff8; }

 code { font-family: "times new roman"; }

 big12 { font-size:1.2em; }

 h6, nav>h3, .hide
 { position:absolute; left:-1000vw; top:-100vh; }
.hide:focus { z-index:999; left:5px; top:5px; color:#fff; background-color:#000;  }

 details>summary { cursor:pointer; }

/* a */
 a	{ text-decoration:none; color:#333; }

 a[data-title]
 { position:relative; margin:0 0.1em; text-decoration:underline dotted; }
	a[data-title]:hover, a[data-title]:focus { }
		a[data-title]:hover::after, a[data-title]:focus::after { content:attr(data-title); display:block; z-index:1;
		 position:absolute; left:-5em; top:1.2em;
		 border:1px solid; background-color: #fffe; white-space:pre; font-family:微軟正黑體; color:#000; }



/* form */
 input { border:1px solid #ccc; vertical-align:middle; }
 input[type=image] { border:0; }

 input::placeholder { text-indent:0.5em; color:#666; }
 input::-webkit-calendar-picker-indicator {  }

 input[type=radio], input[type=checkbox] { width:1em; height:0.9em; vertical-align:text-top; }
 input[type=submit], input[type=button], input[type=reset], select, button
 { cursor:pointer; }
 input:out-of-range { color:red; }

 input, select { font-size:1em; }
 label>span, select { vertical-align:middle; line-height:1; }
 select:not(:-internal-list-box) { }
 select:-internal-list-box { }

 idiv { vertical-align:middle; }

/* header */

body>header {  }
body>header>* { max-width:75em; margin:auto; }
body>header>flex { padding-top:0.5em; justify-content:space-between; }
body>header>nav>a { border:1px solid #624e36; }

header>nav { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; max-width:60em; margin:1.5em auto 0; font:1.25em/1 部件; text-align:center; }
header>nav>div { flex-grow:1; width:10em; max-width:50%; border:1px solid var(--colorGa1); border-bottom:0; color:var(--colorR); line-height:3; }
header>nav>div:hover, header>nav>div:focus-within { background:var(--colorR); color:#fff; } 
header>nav>div>menu { position:absolute; left:0; width:100%; height:1px; overflow:hidden; margin:0; padding:0 1.5em; background:var(--colorR); text-align:left; transition:all 0.5s; }
header>nav>div:hover>menu, header>nav>div:focus-within>* { height:unset; min-height:7em; z-index:1; padding-bottom:1em; transition:all 0.5s; } 
header>nav>div>menu>li { display:inline-block; min-width:8.375em; margin:0.5em 0.7em; border-bottom:1px solid #fff; }
header>nav>div>menu a { display:block; line-height:2; color:#fff; text-align:center; }
header>nav>div>menu a.act { color:#fc8; }
header>nav>div>menu a:hover, header>nav>div>menu a:focus { border-color:#ff0; color:#ff0; }

/* home */

header.headH { min-height:30em; background:url(img/bg.png) #fff no-repeat 0 0/100%; }
header.headH>flex>aside { margin-top:1em; text-align:right; }
header.headH>flex>aside a { display:inline-block; margin:0.2em; padding:0.2em;
 border:1px solid #fff; background:#0008; color:#fff; line-height:1; 
 text -shadow: 2px 2px 2px #000; box-shadow: 1px 1px 2px #000; 
}

header.headH>flex a.on { background:#fff8; color:#000; }
header.headH>flex a>img { width:25em; }
header.headH>flex a:hover { border-color:#ff0; color:#ff0; }

header.headH form { display:inline-block; margin:7em 0 2em 2em; background:var(--colorGa2); font-size:1.5em; color:#fff; }
header.headH form>* { margin:0.1em; }
header.headH form label>span { display:inline-block; min-width:2em; margin-right:0.2em; vertical-align:middle; font:1em/1 '';  }
header.headH form input { max-width:60vw; height:2em; font-size:1em; }
header.headH form input[type=image] { padding:0.4em; }
header.headH form input::placeholder { font-size:1em; }

.daily { display:inline-block; vertical-align:bottom; }
.daily td { border:2px solid #d6adad; font-size:1.5em; padding:0.5em; background:#f1d6d6; line-height:1; }
.daily td[rowspan]:first-child { width:1.25em; padding:0; background:#fff url(img/word.svg) no-repeat 50%/100%; text-align:center; font:5em/1 標楷體; }
.daily td[rowspan]:nth-child(2) { width:0.3em; border:0; padding:0; background:#fff; }

.more { color:var(--colorR); }
.more::before { content:'◆'; color:#000; }

header.head { min-height:13.75em; border-bottom:1px solid var(--colorGa1); background:url(img/banner.png) #fff no-repeat 0 0/100%; }
header.head>flex {  }
header.head>flex>h1 { margin:3em 0 0em 8em; }
header.head>flex>h1 img { width:25em; }
header.head>flex>aside a { display:inline-block; padding:0.5em; background:#fffa; line-height:1; }
header.head>flex>aside a.on { background:#000c; color:#fff; }

header.head form input { height:2em; background:#fffa; vertical-align:bottom; }
header.head form input[type=image] { padding:0.3em; }
header.head form input:hover, header.head>flex>aside a:hover
, header.head form input[type=image]:focus, header.head>flex>aside a:focus { background:#ffc; color:#000; }


main.home { padding:0 0.5em 1em; background:#fff; }
main.home h2 { padding:0.5em 0; font-size:1.6em; color:#333; }
main.home h2>idiv { padding:0.3em; line-height:1; }
main.home h2>idiv:nth-child(n+2) { border-left:2px solid var(--colorR); }

main.home flex { justify-content:space-around; max-width:75em; margin:auto; }
main.home nav.menu { max-width:33em; font-family:"部件"; }
main.home nav.menu a { display:inline-block; width:16.5em; max-width:50%; padding:0.5em 0; border-bottom:1px solid #bbb; line-height:1.5; font-size:1.5em; }
main.home nav.menu a:hover, main.home nav.menu a:focus { background:#f2f2f2; }
main.home nav.menu a::before { content:'◆'; margin-right:0.5em; color:#624e36; font-family:none; }
main.home nav.menu a.full { display:block; width:100%; max-width:100%; }

main.home nav.menu, main.home section { margin-bottom:2em; }
main.home nav.menu, main.home h2 { font-family:"部件"; }


main.home .news {  }
main.home .news ul { margin:0; padding:0; list-style-type:none; }
main.home .news li { list-style-type:none; border-bottom:1px solid #bbb; }
main.home .news li a { display:block; padding:0.5em 0; line-height:2; }
main.home .news li a red { display:inline-block; width:9em; }
main.home .news li time { color:var(--colorR); margin-right:1em; }
main.home .news li h1 { display:inline-block; }

main a:hover, main a:focus { background:#ff8; }

 main.page { min-height:calc(100vh - 28.6em); padding:0 1em 2em ; background:#efeeed; }

#main>* { max-width:75em; margin:auto }
#main>h2 { padding:1em 0; }
#main>h2 img { width:0.75em; }
#main>section>h3 { margin-bottom:1em; padding:0.5em 0; border-bottom:1px solid #ccc; font:1.6em/1 '部件'; }
#main>section>h3>idiv { padding:0.3em; line-height:1; }
#main>section>h3>idiv:nth-child(n+2) { border-left:2px solid var(--colorR); }

nav.index {  }
nav.index>a { display:inline-block; border:1px solid #ccc; margin:0.2em; padding:0.5em 1em; background:#fff;  }
nav.index>a:hover, nav.index>a:focus { background:#ffc; }

/* search */
.search {}
.search h4 { display:inline; }
.search h4 b { color:var(--colorR); border-bottom:1px solid #888; font-family:部件; font-weight:normal; }
.search h4 b::before, .search h4 b::after { content:'◆'; color:var(--colorGa2); font-family:cursive; }
.search.one h4 b { display:none; }
.search h4+idiv { color:var(--colorR); }

.search.one form>section, .search.one form>details { display:block; max-width:40em; margin:auto; }
.search.one details table { margin:auto; }


.search form { font-size:1.5em; }
.search form>section { margin-bottom:4em; }
.search form input[type=text], .search form input[type=number], .search form input:NOT([type]), .search form Select { height:2em; }
.search form label { display:inline-block; }
.search form label>span { display:inline-block; min-width:5em; padding:0 0.5em 0 0; text -align:right; font-weight:bold; color:var(--colorR); }
.search form input[type=reset], .search form input[type=submit] { min-width:6em; margin:0.3em 1em; padding:0.5em; text-align:center; font:1em/1 ''; }
.search form input[type=reset] { border:1px solid #ccc; background:#fff; color:var(--colorR); }
.search form input[type=submit] { background:var(--colorR); color:#fff; }
.search form cen>input:hover, .search form cen>input:focus { color:#000; }


.barBtm { position:sticky; bottom:0; margin:2em -0.4em 0; padding:0.2em 0; border:1px solid #ccc; background:#efeeede0; text-align:center; font -size:1.2em; }

.search details { max-width:100%; max -height:60vh; overflow:auto; }
.search details>summary:hover { background:#ffc; }
.search details>summary[title]:hover::after { content:'( 'attr(title)' )'; margin-left:0.5em; color:#444; }

.search .sticky { position:sticky; top:-1px; border-bottom:1px solid #ccc; padding:1em 0; background:#efeeed; }

.search section.idc { width:30em; max-width:95%; border:0; padding:0.5em; }
.search section.idc>h5 { border-bottom:1px solid #ccc; margin-bottom:1em; }
.search section.idc a { display:inline-block; border:1px solid #ccc; margin:0.2em; padding:0.2em; background:#fff; font:2.1em/1 ''; }

.search .list2 {  }
.search .list2 figure { display:inline-block; margin:1em 0.5em; }
.search .list2 figcaption { margin-bottom:0.5em; background:var(--colorGa2); color:#fff; text-align:center; }
.search .list2 figure a { display:inline-block; width:1.4em; margin:0.2em; padding:0.2em; border:1px solid #333; background:#fff; font:1em/1 部件; text-align:ccenter; }
.search .list2 figure a:hover { background:#ff8; }

.search .list2 details figure a { }
.search .list2 details.row figure { max-width:2em; vertical-align:top; }
.search .list2 details.row figure:last-child { max-width:13em; }

.search .box1 { padding:1em 0; }
.search .box1 fieldset { border:0; font-size:0.8em; }
.search .box1 fieldset>legend { width:100%; border-bottom:1px solid #ccc; font-size:1.25em; }


.keyboard { border-collapse:separate; border-spacing:0.5em; }
.keyboard tr { position:relative; }
.keyboard td { padding:0; }
.keyboard td[rowspan] { background:#ccc; }
.keyboard input { width:2em; height:2em; border:1px solid #ccc; background:#fff; text-align:center; }
.keyboard.kai input { font-family:部件; }
.keyboard.kai input:hover { background:#ff8; }




/* list */
.search h4 { font-size:1.25em; }
.search dl dt { margin:2em 0 1em; }
.search dl dt>idiv { color:var(--colorR); border-bottom:1px solid #888; font-size:1.25em; }
.search dl dt>idiv::before, .search dl dt>idiv::after { content:'◆'; color:var(--colorGa2); font-family:cursive; }


.search ul { padding:0; }
.search dl dd, .search ul>li { display:inline-block; min-width:3em; margin:0.1em; border:1px solid #ccc; background:#fff; font-size:2em; }
.search ul>li { min-width:5em; }
.search ul.idx1 { display:flex; flex-wrap:wrap; list-style-type: none; }
.search ul.idx1>li { flex-grow:1; min-width:calc(50% - 0.2em); }
.search ul.idx1 a>var { font-size:0.5em; }

.search dd>a, .search ul>li>a { display:block; padding:0.2em; }
.search a sub { color:#0008; font-size:0.5em; }
.search dl a:hover, .search ul>li>a:hover, .search dl a:focus, .search ul>li>a:focus { background:#ff8; }

/* 結果 */

.searchInf { justify-content:space-between; font-size:1.125em; }
.searchInf var { font-style:normal; color:var(--colorR); }
.searchInf fieldset { border:0; }
.searchInf fieldset legend { float:left; }

/* 二級搜尋 */
.search2 { background:var(--colorGa2); color:#fff; }
.search2 label { display:inline-block; margin-left:1em; }
.search2 label>span { display:inline-block; padding:0 1em; }
.search2 label::before { content:attr(pre); display:inline-block; width:2em; background:var(--colorGa1); line-height:2; text-align:center; }
.search2 select { height:2em; min-width:5em; line-height:2; }
.search2 select optgroup { background:#fc8; }
.search2 select optgroup option { background:#fff; }

.list { list -style-type:none; padding:0; }
.list li { display:inline-block; }
.list li>a { position:relative; display:inline-block; width:7em; margin:0.25em; }
.list li>a>div { padding:0.375em; background:#fff; font-size:4em; line-height:1; text-align:center; }
.list li>a>div>img { width:1em; vertical-align:bottom; }
.list a:hover>div, .list a:focus>div { background:#ff8; }
.list a>var { display:block; text-align:center; font-style:normal; }
.list a[data-tp]::before { content:attr(data-tp); display:block; position:absolute; width:1em; padding:1px; background:#999; color:#fff; line-height:1; text-align:center; }






/* news */
main>.news {}
main>.news>cen { margin:1em; }
main>.news article { padding:1em; border:1px solid #ccc; background:#fff; font-size:1.25em; }
main>.news article h1 { font-size:1.6em; color:var(--colorR);  }
main>.news article a { display:inline-block; margin:0 0.2em; padding:0 0.2em; border:1px dashed #888;  }
main>.news article a:hover, main>.news article a:focus { background:#ffc;  }

/* page */
 section.page article { font-size:1.25em; }
 section.page article h1 {  }
 section.page article h4 { display:inline-block; margin:1em 0; border-bottom:1px solid #888; text-align:left; color:var(--colorR); font-size:1.2em; }
 section.page article h4::before, .page article h4::after { content:'◆'; color:#000; }
 section.page .datTab>caption, .page h4 { font-family:部件; }

 section.page article p { text-indent:2em; }
 section.page article { line-height:1.5; }
 section.page article table { border-collapse:collapse; }
 section.page article table tr th { background:#e2e2e2; }
 section.page article table tr>* { border:1px solid #666; }


/* button */
.btn1 { display:inline-block; margin:0 0.3em; padding:0.5em 1em; background:var(--colorR); line-height:1; color:#fff; }
.btn1:hover, .btn1:focus { background:var(--colorRd); }

.pager { margin:1em 0; padding:0; text-align:center; }
.pager>div>* { display:inline-block; margin:0 0.5em; padding:0.5em; min-width:4.5em; }
.pager a:hover, .pager a:focus { background:#ffc; }
.pager .act { background:var(--colorR); color:#fff; }

/* form */

.form1 { display:block; margin:1em 0; }
.form1 label { display:inline-block; margin:0.2em; }
.form1 label>* { vertical-align:middle; }
.form1 label>span { display:inline-block; margin-left:-1.5em; padding:0.2em 0.5em; border:1px solid #ccc; background:#fff; color:#000; }
.form1 label>input[type='radio'] {}
.form1 label>input[type='radio']:checked+span { background:var(--colorGa1); color:#fff; }
.form1 input { height:2em; line-height:2; }
.form1 input {  }
.form1 input[type='submit'] { background:var(--colorR); color:#fff; }
.form1 {}


/* view */

.view { width:100%; background:#fff; }
.view>tbody>tr>th, .view>tbody>tr>td { border:1px solid #ccc; padding:1em; }
.view>tbody>tr>th { width:8em; background:var(--colorGa2); vertical-align:middle; white-space:nowrap; font-size:1.5em; font-weight:bold; color:#fff;  }
.view>tbody>tr:nth-child(even)>th { background:var(--colorGa1); }
.view>tbody>tr>td { line-height:1.8; }

.view>tbody>tr:first-child>td figure figure { width:6em; border:1px solid #ccc; margin:0.5em; line-height:1.5; }
.view>tbody>tr:first-child>td figure figure>figcaption { border-top:1px solid #ccc; }
.view>tbody>tr:first-child>td figure figure>div { padding:0.25em; font:3.333333em/1 ''; }
.view>tbody>tr:first-child>td figure figure>div img { width:1em; vertical-align:top; }
.view>tbody>tr:nth-child(2)>td a>img { display:inline-block; width:1.5em; margin:-1em 0; }

.view td { font-size:1.2em; }
.view figure { display:inline-block; margin:0.2em; vertical-align:top; text-align:center; }
.view td>flex>figure { min-width:19%; margin-bottom:1em; }
.view td>flex>figure idiv>div { margin:0.25em; padding:0.25em; background:#ccc; font:0.83333333em/1 ''; }
.view td>flex>figure>figcaption { margin-bottom:0.5em; padding:0.3em; background:#ccc; }
.view td>flex>figure figure { }
.view td>flex>figure figure>figcaption { padding:0.2em; background:#efeeed; }
.view td select { padding:0.5em; }
 figcaption>label { display:block; }
.view figure[cjkCode] figure figcaption { font-family:'Noto Color Emoji'; }
.view figure[component] { font-family:'部件'; }
.view figure[phonetic] { width:100%; }
.view figure[changjie] ruby {  }
.view figure[changjie] rt { font-style:italic; color:#888; }
.view figure[changjie] ins { display:block; text-decoration-color:red; }

.view a { border:1px dashed #ccc; padding:0.2em; }
.view a:hover, .view a:focus { background:#ff8; }




.anc { margin-bottom:1em; }
.anc {  }
.anc a { display:inline-block; position:relative; min-width:9em; margin:0.7em 0.3em; background:#fff; line-height:2.5; color:#000; text-align:center; }
.anc a:hover, .anc a:focus { color:var(--colorR); }
.anc a:hover::after, .anc a:focus::after { border-color:#ff8 #fff0; }
.anc a::after { content:''; display:block; position:absolute; top:2.5em; height:0.75em; border-width:0.75em 4.5em 0; border-color:#fff #fff0; border-style:solid; }

.sound { border-collapse:separate; border-spacing:0.25em; width:100%; }
.sound thead tr {  }
.sound thead tr>th { background:#efeeed; }
.sound tbody tr>th {  }
.sound tbody>tr>* { border-bottom:1px solid #ccc; }
.sound tbody>tr>td {  }

/* 法帖 */
.write {}
.write>flex>section { display:inline-block; border:1px solid #888; margin:0.5em; }
.write>flex>section>h4 { margin:0; }
.write section flrx { text-align; }
.write section section { display:inline-block; margin:0.3em; }
.write section section>flex { align-items:flex-end; }
.write section>h5 { margin:0; padding:0.3em 1em; background:#ccc; }
.write section a { display:inline-block; vertical-align:top; }
.write section a:hover, .write section a:focus { background:#ffc; }
.write figure { display:inline-block; margin:0.5em; }
.write figure>figcaption { max-width:7em; height:2.5em; text-align:center; }
.write figure>div { background:#fff; }
.write figure img { max-width:7em; max-height:7em; }
.write {}

.write2 { justify-content:center; }
.write2>img { max-width:22.5em; max-height:22.5em; border:1px solid #ccc; margin:0 0.5em; padding:1em; background:#fff; }
.write2 table { ; }
.write2 table tr>th { background:var(--colorGa2); font-size:1.5em; color:#fff; }
.write2 table tr:nth-child(even)>th { background:var(--colorGa1); }
.write2 table tr>* { padding:1em; border:1px solid #ccc; }

.write2 a { border:1px dashed #ccc; padding:0.2em; }
.write2 a:hover, .view a:focus { background:#ff8; }


/* 注音 */

 phon { display:inline-block; border: 0px dashed #ccc; border-radius: 0.3em; padding-top: 0.5em; 
 white-space:nowrap; font-family:部件; }
 phon>sup { position:relative; display: inline-block; left:-0.6em; top:-0.6em;
	 margin:-1em 0.5em 0 0; font-size:0.7em; text-indent:0; }



/* table */

.scroll { max-width:99vw; overflow:auto; }
.datTab { background:#fff; }
.datTab caption { margin-top:1em; border-bottom:1px solid #888; text-align:left; color:var(--colorR); font-size:1.5em; }
.datTab caption::before, .datTab caption::after { content:'◆'; color:#000; }
.datTab thead { color:#fff; }
.datTab thead>tr:first-child { background:var(--colorGa2); }
.datTab thead>tr:nth-child(2) { background:var(--colorGa1); }
.datTab thead>tr>th {  }
.datTab>tbody { font-size:1.25em; }
.datTab>tbody>tr:nth-child(odd) { background:#f2f2f2; }
.datTab>tbody th { background:var(--colorGa1); color:#fff; }
.datTab>tbody>tr:hover { background:#ffc; }
.datTab th, .datTab td { padding:0.2em; border:1px solid #ccc; line-height:1.5; }
.datTab th, .news .datTab td { text-align:center; }
.datTab tfoot td { text-align:left; }


/* download */

.dl h4 { margin:1em 0; }
.dl h4>idiv { display:inline-block; border-bottom:1px solid #888; text-align:left; color:var(--colorR); font-size:1.2em; font-family:部件; }
.dl h4>idiv::before, .dl h4>idiv::after { content:'◆'; color:#000; }

.dl a { display:flex; justify-content:space-between; border:1px solid #ccc; margin:0.2em 0; background:#fff; font:bold 2em/2 ''; }
.dl a button { float:right; font-size:1em; margin:0.25em; }
.dl a button:hover, .dl a button:focus { background:#aaa; }
.dl a:hover, .dl a:focus { background:#ff8; }
.dl a::before { content:''; display:inline-block; min-width:2em; height:2em; margin-right:0.5em; background:var(--colorGa2) url(img/download.png) center / 50% no-repeat; vertical-align:bottom; }

.dl2>flex { font-size:1.5em; }
.dl2 h4 { width:50%; }
.dl2 dt { display:inline-block; margin:1em 0; border-bottom:1px solid #888; text-align:left; color:var(--colorR); font-size:1.2em; font-family:部件; }
.dl2 dt::before, .dl2 dt::after { content:'◆'; color:#000; }



/* 意見 */
.sug {}
.sug form>* { margin-top:1em; }
.sug flex { column-gap:2em; }
.sug flex>label {}
.sug flex>label>input { height:2em; }
.sug fieldset { border:0; margin-left:0; padding:0; line-height:2.5; }
.sug legend { float:left; padding:0; }
.sug form>label { display:block; }
.sug label>div, .sug legend { font:bold 1.25em/2 ''; }
.sug flex input, .sug textarea { width:100%; border:1px solid #ccc; }


/* sideMap */

.sideMap { font-size:1.5em; color:var(--colorR); }
.sideMap h4 { display:inline-block; margin:1.5em 0 0.5em; border-bottom:1px solid #888; text-align:left; color:var(--colorR); font-size:1.2em; }
.sideMap h4::before, .sideMap h4::after { content:'◆'; color:#000; }
.sideMap ul { margin:0; padding:0; }
.sideMap li { display:inline-block; margin:0; padding:0; }
.sideMap li::after { content:'|'; margin:0 0.25em; color:var(--colorR); }
.sideMap a { display:inline-block; min-width:6em; text-align:center; }


#goTop 
{	position:sticky; z-index:9; top:0; height:0; text-align:right; 
	&>div { position:relative; }
	a {	position:absolute; display:inline-block; background-color:#aa835080; color:#fff;  top:calc(100vh - 7em); right:-5.5em; width:5em; height:5em; border-radius:50%; text-align: center; font-family:'Arial Black'; line-height:1;
		animation-name:closeBtn; animation-duration: 0.5s; 
		
		div { font:2.5em/1 '微軟正黑體'; }
		&:hover { background-color:#aa8350; text-decoration:none; }
	}
	&.show { bottom:5em; animation-name: showBtn; animation-duration: 0.5s; }
}

/* foot */

 body>footer { min-height:14em; background:#333; color:#fff; }
 body>footer a { display:inline-block; color:#fff; }
 body>footer a:hover, body>footer a:focus { color:#ff0; }
 body>footer>flex { justify-content:space-between; max-width:75em; margin:auto; padding:2em 0 0; }
 body>footer>flex>* { margin:0.5em; }
 body>footer>flex>a>img { width:19.125em; }
 body>footer>flex>div { text-align:right; line-height:2; }


@media screen and (min-width:801px) and (max-width: 1600px)
{
	body { font-size:1vw; }
}
@media screen and (max-width: 800px)
{
	body { font-size:4vw; }
	header.headH { background-size:150%; }
	header.headH form { margin:0.5em; }
	header.headH>nav, flex { flex-wrap:wrap; }
	header.head>flex>h1 { margin:1em 0; }
	header>nav>div>menu { padding:0; }

	#main { padding:0; padding-bottom:1em; }
	#main>* { margin:0 0.5em; }

	.view>tbody>tr>* { display:block; }
	.view>tbody>tr>td { padding:1em 0; }
	.sound tbody>tr>td { font-size:0.75em; }
	.anc { text-align:center; }
	
	#goTop a { right:0; }
}
