/*20221127*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


.resetcss {
  content: "20260316下午 含a11y2/9之後調整和華藝總館和批次借閱";
}


* {
  margin: 0;
  padding: 0;
  font-family: 'Overpass', 'Roboto', 'Noto Sans TC', 'Noto Sans SC', '微軟正黑體', sans-serif;
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-user-focus: none;

}


html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
img,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /*font: inherit;
	vertical-align: baseline;*/
}

div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
img {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /*font-size: 16px;*/
  scroll-behavior: smooth;
}

.hr {
  width: 100%;
  height: 1px;
  border-top: 1px var(--G300) solid;
}

hr {
  width: 100%;
  height: 1px;
  border: 0px;
  background: var(--G300);
}

body * {
  max-height: 999999px;
}

body {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}


ol,
ul {
  list-style: none;
}


table {
  /*border-collapse: collapse;
	border-spacing: 0;*/
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #F7FAFC;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #E4ECF7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #E4ECF7;
}

/**===============a11y=========**/

.sr-only {
  position: absolute;
  top: -99999px;
  left: 0;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
}

input[type="checkbox"],
input[type="radio"] {
  /*position: absolute;
  left: -99999px;容易跳錨點*/
  display: inline-block !important;
  cursor: pointer;
  width: 1px !important;
  height: 1px !important;
  /*position: absolute;*/
}

.unitChoice ul li input[type="radio"]:focus-visible {
   outline: 2px solid transparent !important;
}

header .logo:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
select option:focus-visible,
details summary:focus-visible,
nav.navPCPart .personalMenu li:focus-visible,
label.u-radio:has(input[type="radio"]:focus-visible),
label.u-check:has(input[type="checkbox"]:focus-visible),
label.u-switch:has(input[type="checkbox"]:focus-visible),
.filterSide .sortTreePanel:has(.treeTrigger:focus-visible) .transIcon {
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}

label.u-radio input[type="radio"]:focus-visible,
label.u-check input[type="checkbox"]:focus-visible,
label.u-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid transparent !important;
}

li:has(label.option):has(input[type="radio"]:focus-visible) {
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}

label.u-tap:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}

label.u-tap input[type="checkbox"]:focus-visible {
  outline: 2px solid transparent !important;
}

.sort .sortTreePanel .treeTrigger:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px;
}

nav.navPCPart .personalMenu li:last-child>a>div {
  display: inline-block;
}

nav.navPCPart .megaTabBar input[type="radio"]:focus-visible+.megaTabLabel{
  outline: 2px solid #000 !important;
  outline-offset: 2px;
}

nav.navPCPart .megaTabBar input[type="radio"]:focus-visible{
  outline: 2px solid transparent !important;
}

/*補上headerfooter.css a11y跑版問題**/
header nav.navPCPart .megaTabBar input[type="radio"] {
  position: relative;
}

nav.navPCPart .megaTabBar input[type="radio"]:focus-visible{	
  outline: 2px solid transparent !important;
}

/*補上headerfooter.css a11y跑版問題**/
header nav.navPCPart .megaTabBar input[type="radio"] {
  position: relative;
}

.skiptomain:focus {
  position: absolute;
  top: 24px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  outline-color: transparent !important;
  -webkit-transition: top .1s ease-in !important;
  transition: top .1s ease-in !important;
  padding: 0.75rem 1rem !important;
  background: var(--G900) !important;
  color: #ffffff !important;
  z-index: 1000;
}
/**===============a11y=========**/


/*input[type="button"]{

cursor:pointer;}

input[type="radio"]{

border:none;}
*/
label,
span,
p {
  font-size: inherit;
}

details,
summary {
  display: block;
  box-sizing: border-box;
}

summary {

  list-style: none;

}


summary::-webkit-details-marker {

  display: none
}

summary {
  cursor: pointer;
}

:root {
  --G50: #FAFAFA;
  --G100: #F4F4F4;
  --G300: #E0E0E0;
  --G500: #C4C4C4;
  --G700: #696969;
  --G900: #292929;
  --seaBlue: #6B86AE;
  --skyBlue: #A3C0EA;
  --purple: #A073B6;
  --lavender: #C7A3EA;
  --tan: #AE906B;
  --skin: #EACDA3;
  --success: #66CB9F;
  --danger: #F16063;


  /*--clickTanDefault:#AE906B;
	--clickTanHover:#EACDA3;
	--clickTanActive:#EACDA3;

	--clickG900Default:#AE906B;
	--clickG900Hover:#6B86AE;
	--clickG900Active:#6B86AE;

	--clickG700Default:#696969;
	--clickG700Hover:#6B86AE;
	--clickG700Active:#6B86AE;

	--clickseaBlueDefault:#6B86AE;
	--clickseaBlueHover:#A3C0EA;
	--clickseaBlueActive:#A3C0EA;

	--disable:#E0E0E0;*/

  --h1FS: 2rem;
  --h2FS: 1.5rem;
  --p1FS: 1.25rem;
  --p2FS: 1rem;
  --p3FS: 0.875rem;
  --p4FS: 0.75rem;

  /*--h1lineHe1:3rem;
	--h2lineHe2:2.25rem;
	--p1lineHe1:1.875rem;
	--p2lineHe2::1.5rem;
	--p3lineHe3:1.3125rem;
	--p4lineHe4:1.125rem;

	*/

}

.box-shadow {
  box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.15);
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0030-0039;
  /*unicode-range: U+30-39;*/
  /*unicode-range: U+00-024F;*/
  /* unicode-range: U+0030-0039; unicode-range: U+4E00-9FFF*/
}


[lang=zh-hant] {
  font-family: 'PingFang TC', 'Noto Sans CJK TC', 'Heiti TC', 'Microsoft JhengHei', Helvetica, Segoe UI, Arial, sans-serif;
}

[lang=zh-hans] {
  font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Heiti SC', 'DengXian', 'Microsoft YaHei', Helvetica, Segoe UI, Arial, sans-serif;
}

/*https://fonts.googleapis.com/css?family=Roboto*/